#6 绑定元素属性

来源：互联网发布：中文域名icp备案编辑：程序博客网时间：2024/05/19 17:09

英文原版：https://guides.emberjs.com/v2.13.0/templates/binding-element-attributes/

除了绑定普通文本之外，你同样可能会想要绑定模板中HTML元素的属性。

例如，我们假设你的controller中有个属性，它的值是一个链接到图片的URL。

<div id="logo">  <img src={{logoUrl}} alt="Logo"></div>

编译后将生成：

<div id="logo">  <img src="http://www.example.com/images/logo.png" alt="Logo"></div>

下例，如果你绑定了一个boolean值，那么将会根据值得结果添加或删除掉这个属性：

<input type="checkbox" disabled={{isAdministrator}}>

如果isAdministrator为true，Handlerbars将会如下渲染HTML元素：

<input type="checkbox" disabled>

如果isAdministrator为false，那么渲染结果如下：

<input type="checkbox">

添加 data- 属性

默认的，助手和组件不接受 data- 属性。例子：、

这{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}

渲染的结果：

<a id="ember239" class="ember-view" href="#/photos">Photos</a><input id="ember257" class="ember-view ember-text-field" type="text"       title="Name">

为了支持 data- 属性，那么你需要在组件中定义属性绑定。例子，给Ember.LinkComponent组件或 Ember.TextField组件添加 data- 属性：

Ember.LinkComponent.reopen({  attributeBindings: ['data-toggle']});Ember.TextField.reopen({  attributeBindings: ['data-toggle', 'data-placement']});

好了，现在上面的模板将会被渲染至如下：

<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">

本节完

阅读全文

0 0