2019獨角獸企業重金招聘Python工程師標準>>>

本文從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.jsimport???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這個文件的代碼有點奇葩了……希望讀者們不吝賜教！

轉載于:https://my.oschina.net/ubuntuvim/blog/507065

總結

以上是生活随笔為你收集整理的Ember.js 入门指南——handlebars属性绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。