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;// before app.loadViews();
Coffeescript
If you want to use Coffeescript instead of Javascript in templates:
app;
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
each
, with
Conditionals, if _session.loggedIn h1 Hello, {{_session.username}}else a(href='/login') Login
compiles to
{{if _session.loggedIn}} Hello, {{_session.username}}{{else}} Login{{/}}
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}} {{each #flash.error}} {{this.error}} {{/}} {{/}} {{if #flash.info}} {{each #flash.info as #info}} {{#info}} {{/}} {{/}}{{else}} No notifications{{/}}
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
{{each _page.users as #user}} {{if #user && #user.id}}{{#user && #user.name}} {{else if #user || #user.id}} {{#user.id}} {{else}} nothing {{/}} {{unescaped #user.name}} {{/}} {{@name}} {{if _page.name || @name && this.field}} {{show(@name)}} {{/}} a Matches you liked