[Jade] Basic Reference.

http://jade-lang.com/reference/

 

유용한거 몇가지만 스크랩~

( 다 깨지네;; 레이아웃 안맞아서 그런듯~ ^^; )

 

Unbuffered Code

Unbuffered code starts with - does not add any output directly, e.g.

- for (var x = 0; x < 3; x++)
  li item

<li>item</li>
<li>item</li>
<li>item</li>

 

 

 

 

 

Conditionals

Jade's first-class conditional syntax allows for optional parenthesis, and you may now omit the leading - otherwise it's identical, still just regular javascript:

- var user = { description: 'foo bar baz' }
#user
  if user.description
    h2 Description
    p.description= user.description
  else
    h1 Description
    p.description User has no description

<div id="user">
  <h2>Description</h2>
  <p class="description">foo bar baz</p>
</div>

Jade also provides a negated version unless (the following are therefore equivallent):

unless user.isAnonymous
  p You're logged in as #{user.name}

if !user.isAnonymous
  p You're logged in as #{user.name}

 

 

 

 

 

 

 

Iteration

Jade's first-class iteration syntax makes it easier to iterate over arrays and objects within a template:

ul
  each val in [1, 2, 3, 4, 5]
    li= val

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

You can also get the index as you iterate:

ul
  each val, index in ['one', 'two', 'three']
    li= index + ': ' + val

<ul>
  <li>1: one</li>
  <li>2: two</li>
  <li>3: three</li>
</ul>

Jade also lets you iterate over the keys in an object:

ul
  each val, index in {1: 'one', 2: 'two', 3: 'three'}
    li= index + ': ' + val

<ul>
  <li>1: one</li>
  <li>2: two</li>
  <li>3: three</li>
</ul>

The object or array to iterate over is just plain JavaScript so it can be a variable or the result of a function call as well.

 

 

 

 

 

 

 

Case

The case statement is a shorthand for JavaScript's switch statement and takes the following form:

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

<p>you have 10 fr

 

 

 

 

 

 

 

 

 

Block Expansion

Stability: 2 - Unstable

Block expansion may also be used:

- var friends = 1
case friends
  when 0: p you have no friends
  when 1: p you have a friend
  default: p you have #{friends} friends

<p>you have a friend</p>

 

 

 

 

 

 

 

 

 

Filters

Stability: 2 - Unstable

Filters let you use other languages within a jade template. They take a block of plain text as an input.

:markdown
  # Markdown
  
  I often like including markdown documents in my jade templates.
:coffee
  console.log 'This is coffee script'

<h1>Markdown</h1>
<p>I often like including markdown documents in my jade templates.</p>
<script>console.log('This is coffee script')</script>

 

 

 

 

 

 

 

 

Mixins

Mixins allow you to create reusable blocks of jade.

//- Declaration
mixin list
  ul
    li foo
    li bar
    li baz
//- Use
+list()
+list()

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

They are compiled to functions and can take arguments:

mixin pets(pets)
  ul.pets
    - each pet in pets
      li= pet
+pets(['cat', 'dog', 'pig'])

<ul class="pets">
  <li>cat</li>
  <li>dog</li>
  <li>pig</li>
</ul>

Mixins can also take a block of jade to act as the content:

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided
        
+article('Hello world')

+article('Hello world')
  p This is my
  p Amazing article

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
  </div>
</div>

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

 

 

 

 

 

 

 

 

 

 

 

 

Mixin Attributes

Stability: 2 - Unstable

Mixins currently also get an implicit attributes argument taken from the attributes passed to the mixin:

mixin link(href, name)
  a(class=attributes.class, href=href)= name
  
+link('/foo', 'foo')(class="btn")

<a class="btn" href="/foo">foo</a>