3.5 Templates -- Binding Element Attributes(绑定元素属性)

一、概述

除了正常的文本，你可能还需要你的模板中包含的HTML元素的属性绑定到controller。

1. 例如，设想controller有一个属性包含一个图片的URL:

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

生成的HTML：

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

2. 如果你绑定的是一个布尔值，它将会添加或者移除一个特定的属性。例如：

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

如果isAdministrator是true，Handlebars将会生成如下HTML元素：

<input type="checkbox" disabled>

如果是false：

<input type="checkbox">

二、添加data属性

1. 默认的，view helpers不接受data属性。例如：

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

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

渲染为HTML：

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

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

2. 有两种办法可以让它支持data属性。

一种是添加一个属性绑定到view，例如Ember.LinkComponent或者Ember.TextFielw对特定的属性来说：

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

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

HTML：

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

你也可以在base view中自动绑定data属性：

export default Ember.View.reopen({
  init() {
    this._super();
    var self = this;

    // bind attributes beginning with 'data-'
    Ember.keys(this).forEach(function(key) {
      if (key.substr(0, 5) === 'data-') {
        self.get('attributeBindings').pushObject(key);
      }
    });
  }
});