ember.js 學習筆記 2

HANDLERBARS表达式

使用花括号将属性名称括起来，就可以显示控制器中所定义的属性,如下所示：

Hello, <strong>{{firstName}} {{lastName}}</strong>!

上面的语句将会到控制器中查询firstName和lastName属性值,插入到模板所描述的HTML文档中,然后放到DOM中去。

默认情况下，最上层的应用程序模板与ApplicationController关联，即：
App.ApplicationController = Ember.Controller.extend({
  firstName: "Trek",
  lastName: "Glowacki"
});

上面的模板和控制器将协作呈现出被渲染的HTML,如下所示：


Hello, <strong>Trek Glowacki</strong>!


这些表达式 (以及接下来你将了解的其他Handlerbars功能) 都有绑定机制。这意味着HTML文档将随着模板使用的属性值的改变而自动更新。

随着一个应用程序规模的扩大，将会存在许多的模板，它们将与不同的控制器关联。

有些时候，或许我们只希望在一个属性存在的时候显示一部分模板。

这时，我们就可以使用{{#if}}助手按条件渲染一个代码块,如下所示：
{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{/if}}



如果传入的参数的值是false,undefined,null或者[](例如，任何"假"值),那么Handlebars将不会渲染这个代码块。

如果表达式的值为假,我们也可以使用{{else}}助手显示另外一个模板,如下所示：
{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{else}}
  Please log in.
{{/if}}


如果只希望在一个值为假的时候渲染一个区块，那么应该使用{{#unless}}助手:


{{#unless hasPaid}}
  You owe: ${{total}}
{{/unless}}


{{#if}}和{{#unless}}都是块表达式的例子。通过使用他们可以只执行模板的一部分。块表达式与普通的表达式类似， 不同的地方只在于：在助手名称前面需要有一个#，并且需要一个结束表达式。


如果你需要枚举一个对象列表，可以使用Handlebar的{{#each}}助手:


<ul>
  {{#each people}}
    <li>Hello, {{name}}!</li>
  {{/each}}
</ul>

对于数组中的每一个对象，{{#each}}块内的模板都会被执行一次，模板的内容将被对象的值所代替。

上面的例子将会输出如下所示的一个列表：
<ul>
  <li>Hello, Yehuda!</li>
  <li>Hello, Tom!</li>
  <li>Hello, Trek!</li>
</ul>


{{#each}}助手还有一个可选的语法形式，这种形式不会改变内部模板的作用域。如果你需要从循环内的外部空间访问一个属性，这个语法很有用。


{{name}}'s Friends

<ul>
  {{#each friend in friends}}
    <li>{{name}}'s friend {{friend.name}}</li>
  {{/each}}
</ul>


上面语句将输出这样一个列表：


Trek's Friends

<ul>
  <li>Trek's friend Yehuda</li>
  <li>Trek's friend Tom!</li>
</ul>


{{#each}}助手也可以使用{{else}}助手。如果集合为空，这个块的内容就会被渲染。


{{#each people}}
  Hello, {{name}}!
{{else}}
  Sorry, nobody is here.
{{/each}}