Ember handlebars屬性綁定

簡單講屬性綁定其實就是在HTML標(biāo)簽內(nèi)（是在一個標(biāo)簽的””中使用）直接使用handlebars表達(dá)式?？梢灾苯佑?code>handlebars表達(dá)式的值作為HTML標(biāo)簽中某個屬性的值。

準(zhǔn)備工作： ember generate route binding-element-attributes

1，綁定字符串

<div id="logo">
    <img src={{model.imgUrl}} alt='logo' />
</div>

在對應(yīng)的route:binding-element-attributes里增加測試數(shù)據(jù)。

import Ember from 'ember';


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

運(yùn)行之后模板會編譯成如下代碼：

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

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

2，綁定Boolean值

在開發(fā)過程中我們經(jīng)常會根據(jù)某個值判斷是否給某個標(biāo)簽增加CSS類，或者根據(jù)某個值決定按鈕是否可用等等……那么ember是怎么做的呢？？ 比如下面的代碼演示的是checkbox按鈕根據(jù)綁定的屬性isEnable的值決定是否可用。

{{! 當(dāng)isEnable為true時候，disabled為true，不可用；否則可用}}
<input type='checkbox' disabled={{model.isEnable}}>

如果在route里設(shè)置的值是true那么渲染之后的HTML如下：

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

否則

<input type="checkbox">

3, 綁定data-xxx屬性

默認(rèn)情況下，ember不會綁定到data-xxx這一類屬性上。比如下面的綁定結(jié)果就得不到你的預(yù)期。

{{! 綁定到data-xxx這種屬性需要特殊設(shè)置}}
{{#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的屬性都不見了?。。‖F(xiàn)在很多的前端框架都會用到data-xxx這個屬性，比如bootstrap。那怎么辦呢……你可以在view中指定對應(yīng)的渲染組件Ember.LinkComponent和Ember.TextField（個人理解的）。 執(zhí)行命令得到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版本的寫法還在學(xué)習(xí)中，后續(xù)在補(bǔ)上，現(xiàn)在為了演示模板效果暫時這么寫！畢竟本文的重點還是在模板屬性的綁定上


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


// //  綁定link-to
Ember.LinkComponent.reopen({
    attributeBindings: ['data-toggle']
});

渲染之后得到的結(jié)果符合預(yù)期。得到如下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版中是怎么使用的，現(xiàn)在的代碼是根據(jù)個人理解把指定組件的代碼放在view，官方教程給的也不是Ember2.0版的，所以binding-element-attributes.js這個文件的代碼有點奇葩了……希望讀者們不吝賜教！
博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大?。?，如果你覺得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力?。?/p>