#6 綁定元素屬性

英文原版：https://guides.emberjs.com/v2.13.0/templates/binding-element-attributes/

除了綁定普通文本之外，你同樣可能會想要綁定模板中HTML元素的屬性。

例如，我們假設你的controller中有個屬性，它的值是一個鏈接到圖片的URL。

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

編譯後將生成：

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

下例，如果你綁定了一個boolean值，那麼將會根據值得結果添加或刪除掉這個屬性：

<input type="checkbox" disabled={{isAdministrator}}>

如果isAdministrator爲true，Handlerbars將會如下渲染HTML元素：

<input type="checkbox" disabled>

如果isAdministrator爲false，那麼渲染結果如下：

<input type="checkbox">

添加 data- 屬性

默認的，助手和組件不接受 data- 屬性。例子：、

這{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}

{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}

渲染的結果：

<a id="ember239" class="ember-view" href="#/photos">Photos</a>

<input id="ember257" class="ember-view ember-text-field" type="text"
       title="Name">

爲了支持 data- 屬性，那麼你需要在組件中定義屬性綁定。例子， 給Ember.LinkComponent組件 或 Ember.TextField組件 添加 data- 屬性：

Ember.LinkComponent.reopen({
  attributeBindings: ['data-toggle']
});

Ember.TextField.reopen({
  attributeBindings: ['data-toggle', 'data-placement']
});

好了，現在上面的模板將會被渲染至如下：

<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown">Photos</a>

<input id="ember259" class="ember-view ember-text-field"
       type="text" data-toggle="tooltip" data-placement="bottom" title="Name">

本節完