Jade之Interpolation

Interpolation

jade爲不一樣的需求提供了一些特殊的操做符。詳見Github

= 將右邊的值賦予左邊，或者替換爲右邊變量的值。

//- 賦值，js格式便可。
- var title = "On Dogs: Man's Best Friend";

//- 替換，注意左邊無空格右邊需有空格。
h= title

#{val}將引用處替換爲val變量的值。

- var author = "Tom";

//- 編譯生成的html中爲Tom，而不是#{author}
p Written with love by #{author}

在屬性那一章的特殊屬性中曾提到，相似<這樣的特殊符號編譯後將爲&lt。一樣在使用#{val}的時候，若val變量的值含有這些特殊符號的時候，編譯也會變成&lt這樣的形式。
爲了不出現如上形式，能夠採用!{val}。

jade：

- var riskyBusiness = "<em>Some of the girls are wearing my mother's clothing.</em>";

.quote
  p Joel: !{riskyBusiness}

html：

<div class="quote">
  <p>Joel: <em>Some of the girls are wearing my mother's clothing.</em></p>
</div>

若是須要在文本內容中插入標籤的話，能夠使用#[...]。

jade：

p.
  If you take a look at this page's source #[a(target="_blank", href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade") on GitHub],
  you'll see several places where the tag interpolation operator is
  used, like so.

html：

<p>If you take a look at this page's source <a target="_blank" href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">on GitHub</a>,
  you'll see several places where the tag interpolation operator is
  used, like so.
</p>

循環

jade支持for / while / each三種循環方式，其中for / while均與常見的循環同樣。

each循環能夠用來遍歷整個數組。

jade：

- var name = ['Tom', 'Jim', 'Alex', 'Jack'];
each i in name
  p= i

html：

<p>Tom</p>
<p>Jim</p>
<p>Alex</p>
<p>Jack</p>