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