ember.js 學習筆記 3

切换作用域

有些时候，你可能希望在模版中的一个特定部分使用不同的上下文：

例如，通过切换上下文，我们可以不需重复的指定属性的上下文路径，如下所示：

Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!

我们可以使用{{#with}}助手来简化它，如下所示：

{{#with person}}
  Welcome back, <b>{{firstName}} {{lastName}}</b>!
{{/with}}


注意：可以使用"as"关键字，将上下文保存至一个变量供嵌套使用：


{{#with person as user}}
  {{#each book in books}}
    {{user.firstName}} has read {{book.name}}!
  {{/each}}
{{/with}}



绑定元素属性



除了普通文本，你可能也希望在模板中包含可以将其属性绑定到控制器的HTML元素。

例如，想象一下你的控制器中包含这样一个属性，它包含指向一幅图像的URL地址：




<div id="logo">
  <img {{bind-attr src=logoUrl}} alt="Logo">
</div>


上面代码将生成如下的HTML代码：


<div id="logo">
  <img src="http://www.example.com/images/logo.png" alt="Logo">
</div>


如果你使用{{bind-attr}}绑定一个布尔类型的属性, 它将增加或移除指定属性。例如下面的模板：


<input type="checkbox" {{bind-attr disabled=isAdministrator}}>


如果isAdministrator的值是true，Handlebars将生成如下所示的HTML元素：


<input type="checkbox" disabled>


否则，如果isAdministrator是false，生成的HTML元素如下：


<input type="checkbox">


添加数据属性


缺省情况下，视图助手不接受数据属性。例如：


接下來看不懂了！！！

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}}