Ember.js 入門指南——handlebars屬性綁定

本文從http://www.ibeginer.sinaapp.com遷移過來，歡迎訪問原頁面。

    簡單講屬性綁定其實就是在HTML標籤內（是在一個標籤的」<」和「>」中使用）直接使用handlebars表達式。能夠直接用handlebars表達式的值做爲HTML標籤中某個屬性的值。

準備工做：ember generate route binding-element-attributes

1，綁定字符串

<!-- //  app/templates/binding-element-attribute.hbs   -->
 
<div id="logo">
       <img   src={{model.imgUrl}} alt='logo' />
</div>

在對應的route裏增長測試數據。

import Ember from 'ember';
 
export default Ember.Route.extend({
       model:   function() {
              return   { imgUrl: 'http://i1.tietuku.com/1f73778ea702c725.jpg' };
       }
});

運行以後模板會編譯成以下代碼：

<div id="logo">
       <img   alt="logo"   src="http://i1.tietuku.com/1f73778ea702c725.jpg">
</div>

能夠看到{{model.imgUrl}}會以字符串的形式綁定到src屬性上。

1，綁定Boolean值

在開發過程當中咱們常常會根據某個值判斷是否給某個標籤增長CSS類，或者根據某個值決定按鈕是否可用等等……那麼ember是怎麼作的呢？？

好比下面的代碼演示的是checkbox按鈕根據綁定的屬性isEnable的值決定是否可用。

{{! 當isEnable爲true時候，disabled爲true，不可用；不然可用}}
<input type='checkbox'   disabled={{model.isEnable}}>

若是在route裏設置的值是true那麼渲染以後的HTML以下：

<input type="checkbox"   disabled="">

不然

<input type="checkbox">

 

2，綁定data-xxx屬性

默認狀況下，ember不會綁定到data-xxx這一類屬性上。好比下面的綁定結果就得不到你的預期。

{{! 綁定到data-xxx這種屬性須要特殊設置}}
{{#link-to 'photo'   data-toggle='dropdown'}} link-to {{/link-to}}
{{input type='text' data-toggle='tooltip'   data-placement='bottom' title="Name"}}

模板渲染以後獲得下面的HTML代碼

<a id="ember455" href="/binding-element-attributes"   class="ember-view active"> link-to </a>
<input id="ember470"   title="Name" type="text" class="ember-view   ember-text-field">

能夠看到data-xxx的屬性都不見了！！！如今不少的前端框架都會用到data-這個屬性，好比bootstrap。那怎麼辦呢……你能夠在view中指定對應的渲染組件Ember.LinkComponent和Ember.TextField（我的理解的）。

執行命令獲得view文件：ember generate view binding-element-attributes，在view中手動綁定，以下：

//  app/views/binding-element-attributes.js
 
import   Ember from 'ember';
 
export   default Ember.View.extend({
});
 
//  下面是官方給的代碼，但很明顯看出來這種使用方式不是2.0版本的！！
//  2.0版本的寫法還在學習中，後續在補上，如今爲了演示模板效果暫時這麼寫！畢竟本文的重點仍是在模板屬性的綁定上
 
//  綁定input
Ember.TextField.reopen({
      attributeBindings: ['data-toggle',   'data-placement']
});
 
//   //  綁定link-to
Ember.LinkComponent.reopen({
      attributeBindings: ['data-toggle']
});

渲染以後獲得的結果符合預期。獲得以下HTML代碼

<a id="ember398"   href="/binding-element-attributes" data-toggle="dropdown"   class="ember-view active">link-to</a>
<input   id="ember414" title="Name" type="text"   data-toggle="tooltip" data-placement="bottom"   class="ember-view ember-text-field">

能夠看到data-xxx的屬性正常渲染到HTML上了。

 

       本文介紹了幾個經常使用的屬性綁定方式，很是之實用！可是有點遺憾本人能力有限還沒理解到最後一個實例在Ember2.0版中是怎麼使用的，如今的代碼是根據我的理解把指定組件的代碼放在view，官方教程給的也不是Ember2.0版的，因此binding-element-attributes.js這個文件的代碼有點奇葩了……但願讀者們不吝賜教！