3.5 Templates -- Binding Element Attributes(绑定元素属性)
2016-01-23 10:15
316 查看
一、概述
除了正常的文本,你可能还需要你的模板中包含的HTML元素的属性绑定到controller。
1. 例如,设想controller有一个属性包含一个图片的URL:
生成的HTML:
2. 如果你绑定的是一个布尔值,它将会添加或者移除一个特定的属性。例如:
如果isAdministrator是true,Handlebars将会生成如下HTML元素:
如果是false:
二、 添加data属性
1. 默认的,view helpers不接受data属性。例如:
渲染为HTML:
2. 有两种办法可以让它支持data属性。
一种是添加一个属性绑定到view,例如Ember.LinkComponent或者Ember.TextFielw对特定的属性来说:
HTML:
你也可以在base view中自动绑定data属性:
除了正常的文本,你可能还需要你的模板中包含的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); } }); } });
相关文章推荐
- UITabelViewCell自定义(zhuan)
- RocEDU.阅读.写作
- Linux时间子系统之二:表示时间的单位和结构
- JAVA实现将GeoHash转化为对应的经纬度坐标
- 天声人語 20160123 甘利氏のあいまいな記憶
- 上传文件的文件类型及大小的判断
- Android Audio System 架构初探:库层(一)
- Linux时间子系统之三:时间的维护者:timekeeper
- 螺旋矩阵 题解
- 【算法】M-02八种基本排序
- 自己选择的路,跪着也要把它走完
- 谨慎使用Java8的默认方法
- 数组指针数组的定义及使用(about array of pointer of array)
- GetBuffer 认识
- Linux时间子系统之四:定时器的引擎:clock_event_device
- hash function/ hash table 背后的数学基础
- pair的一些用法
- Linux时间子系统之五:低分辨率定时器的原理和实现
- 复杂类继承体系结构下,实际的类定义
- 设计模式