Attributes

Normal Attributes

HTML Tag:

Tag attributes look similar to html, however their values are just regular JavaScript.

a(href='google.com') Google
a(class='button', href='google.com') Google

Result:

<a href="google.com">Google</a><a href="google.com" class="button">Google</a>

Variable:

All the normal JavaScript expressions work fine too:

- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')

Result:

<body class="authed"></body>

Many Attributes

If you have many attributes, you can also spread them across many lines:

input(
  type='checkbox'
  name='agreement'
  checked
)

Result:

<input type="checkbox" name="agreement" checked="checked"/>

Unescaped Attributes

By default, all attributes are escaped (replacing special characters with escape sequences) to prevent attacks such as cross site scripting. If you need to use special characters you can use != instead of =.

Code:

div(escaped="<code>")
div(unescaped!="<code>")

Result:

<div escaped="&lt;code&gt;"></div>
<div unescaped="<code>"></div>

Boolean Attributes

Boolean attributes are mirrored by Jade, and accept bools, aka true or false. When no value is specified true is assumed.

Code:

input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true.toString())

Result:

<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<input type="checkbox" checked="true"/>

If the doctype is html jade knows not to mirror the attribute and uses the terse style (understood by all browsers).

Code:

doctype html
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true && 'checked')

Result:

<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">

Style Attributes

The style attribute can be a string (like any normal attribute) but it can also be an object, which is handy when parts of the style are generated by JavaScript.

Code:

a(style={color: 'red', background: 'green'})

Result:

<a style="color:red;background:green"></a>

Class Attributes

The class attribute can be a string (like any normal attribute) but it can also be an array of class names, which is handy when generated from JavaScript.

Code:

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- the class attribute may also be repeated to merge arrays
a.bing(class=classes class=['bing'])

Result:

<a class="foo bar baz"></a><a class="bing foo bar baz bing"></a>

It can also be an object mapping class names to true or false values, which is useful for applying conditional classes

Code:

- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about'

Result:

<a href="/">Home</a><a href="/about" class="active">About</a>

Class Literal

Classes may be defined using a .classname syntax:

Code:

a.button

Result:

<a class="button"></a>

Since div’s are such a common choice of tag, it is the default if you omit the tag name:

Code:

.content

Result:

<div class="content"></div>

ID Literal

IDs may be defined using a #idname syntax:

Code:

a#main-link

Result:

<a id="main-link"></a>

Since div’s are such a common choice of tag, it is the default if you omit the tag name:

Code:

#content

Result:

<div id="content"></div>

&attributes

Pronounced “and attributes”, the &attributes syntax can be used to explode an object into attributes of an element.

Code:

div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})

Result:

<div id="foo" data-bar="foo" data-foo="bar"></div>

The object does not have to be an object literal. It can also just be a variable that has an object as its value (see also Mixin Attributes)

Code:

- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)

Result:

<div id="foo" data-bar="foo" data-foo="bar"></div>