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>