2015年7月22日 星期三

ember.js 學習筆記 2

HANDLERBARS表达式


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

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

上面的语句将会到控制器中查询firstNamelastName属性值,插入到模板所描述的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}}  


沒有留言:

張貼留言