0.6.21 • Published 8 years ago
derby-jade v0.6.21
Derby-Jade
- Jade compiler for Derby
- Derby 0.6 version is the only supported (for previous Derby use 0.5 branch)
- Supports derby-specific tags that ends with
:
and makesif, else, else if, unless, with, each
compile into derby View-variables - Colons after derby-specific tags are optional
- process.env.DEBUG = 'derby-jade'; enables debug info
- Coffeescript support
Known Issues
- Line numbers in Jade errors can be wrong, because we compile file by parts
- If you on Coffescript, use this.contextfield or @.contextfield to access context and @fieldname to access component fields as in original Derby syntax
Installation
npm install derby-jade
Setting
app.serverUse(module, 'derby-jade');
// before app.loadViews();
Coffeescript
If you want to use Coffeescript instead of Javascript in templates:
app.serverUse(module, 'derby-jade', {coffee: true});
Then you can do something like this:
if a and b
p
a(on-click="console.log c or 'log'") {{d or 'Click Me'}}
script.
here = canbe + coffee and script
Usage
Derby.js-specific syntax
Conditionals, each
, with
if _session.loggedIn
h1 Hello, {{_session.username}}
else
a(href='/login') Login
compiles to
{{if _session.loggedIn}}
<h1>Hello, {{_session.username}}</h1>
{{else}}
<a href="/login">Login</a>
{{/}}
Another example:
if _page.flash as #flash
if #flash.error
ul.alert.alert-error
each #flash.error
li {{this.error}}
if #flash.info
ul.alert.alert-success
each #flash.info as #info
li {{#info}}
else
p No notifications
compiles to
{{if _page.flash as #flash}}
{{if #flash.error}}
<ul class="alert alert-error">
{{each #flash.error}}
<li>{{this.error}}</li>
{{/}}
</ul>
{{/}}
{{if #flash.info}}
<ul class="alert alert-success">
{{each #flash.info as #info}}
<li>{{#info}}</li>
{{/}}
</ul>
{{/}}
{{else}}
<p>No notifications</p>
{{/}}
import:
and template declarations
import:(src='./auth', ns='')
import(src='./games')
Title:
| My cool app
Body
view(name='welcome', title='Welcome {{_session.username}}')
p We are glad to see you!
Footer:
view(name='copyright')
welcome
h1 {{@title}}
| {{@content}}
copyright:
p Use it however you want {{_session.username}}!
Jade + Js
import(src='./home', ns='home')
import:(src='./about')
Body:
each _page.users as #user
if #user && #user.id
a(on-click='click(#user && #user.id)') {{#user && #user.name}}
else if #user || #user.id
p {{#user.id}}
else
p nothing
view(name='{{#user.id || #user.name}}')
p {{unescaped #user.name}}
p
script.
window.scrollTo(0 || 1, 0 && 1)
//script.
window.location = window.location
p
script.
history.go(-2)
// p bla-bla
script history.go(2)
script(src='/script.js')
script.
history.go(1)
component
p {{@name}}
if _page.name || @name && this.field
div {{show(@name)}}
script.
history.go(0)
input
p a
index:
layout:body
view(name="matches-you-liked")
matches-you-liked:
h1 Matches you liked
Jade + Coffee
import(src='./home', ns='home')
import:(src='./about')
Body:
each _page.users as #user
if #user and #user.id
a(on-click='click #user and #user.id') {{#user and #user.name}}
else if #user or #user.id
p {{#user.id}}
else
p nothing
view(name='{{#user.id or #user.name}}')
p {{unescaped #user.name}}
p
script.
window.scrollTo 0 or 1, 0 and 1
//script.
window.location = window.location
p
script.
history.go -2
// p bla-bla
script history.go 2
script(src='/script.js')
script.
history.go 1
component
p {{@name}}
if _page.name or @name and @.field
div {{show @name}}
script.
history.go 0
input
p a
index:
layout:body
view(name="matches-you-liked")
matches-you-liked:
h1 Matches you liked
Result
<import: src="./home" ns="home">
<import: src="./about">
<Body:>
{{each _page.users as #user}}
{{if #user && #user.id}}<a on-click="click(#user && #user.id)">{{#user && #user.name}}</a> {{else if #user || #user.id}}
<p>{{#user.id}}</p>
{{else}}
<p>nothing</p>
{{/}}
<view name="{{#user.id || #user.name}}"></view>
<p>{{unescaped #user.name}}</p>
{{/}}
<p>
<script>
window.scrollTo(0 || 1, 0 && 1)
</script>
<p>
<script>
history.go(-2)
</script>
</p>
</p>
<script>history.go(2)</script>
<script src="/script.js"></script>
<script>
history.go(1)
</script>
<component:>
<p>{{@name}}</p>
{{if _page.name || @name && this.field}}
<div>{{show(@name)}}</div>
{{/}}
<script>
history.go(0)
</script>
<input:>
<p>a</p>
<index:>
<layout:body>
<view name="matches-you-liked"></view>
</layout:body>
<matches-you-liked:>
<h1>Matches you liked</h1>
0.6.21
8 years ago
0.6.20
8 years ago
0.6.19
9 years ago
0.6.18
9 years ago
0.6.17
9 years ago
0.6.15
10 years ago
0.6.14
10 years ago
0.6.13
10 years ago
0.6.12
10 years ago
0.6.11
10 years ago
0.6.10
10 years ago
0.6.9
10 years ago
0.6.8
10 years ago
0.6.7
10 years ago
0.6.6
10 years ago
0.6.4
10 years ago
0.6.3
10 years ago
0.6.2
10 years ago
0.6.1
10 years ago
0.6.0
10 years ago
0.5.0
10 years ago