2015年7月22日 星期三

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的值是trueHandlebars将生成如下所示的HTML元素:

<input type="checkbox" disabled>

否则,如果isAdministratorfalse,生成的HTML元素如下:

<input type="checkbox">

添加数据属性

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

接下來看不懂了!!!

沒有留言:

張貼留言