Binding Element Attributes

Binding Element Attributes

In addition to normal text, you may also want to have your templates contain HTML elements whose attributes are bound to the controller.

For example, imagine your controller has a property that contains a URL to an image:

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

This generates the following HTML:

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

If you use data binding with a Boolean value, it will add or remove the specified attribute. For example, given this template:

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

If isAdministrator is true, Handlebars will produce the following HTML element:

<input type="checkbox" disabled>

If isAdministrator is false, Handlebars will produce the following:

<input type="checkbox">

Adding Data Attributes

By default, helpers and components do not accept data attributes. For example

{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}

{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}

renders the following HTML:

<a id="ember239" class="ember-view" href="#/photos">Photos</a>

<input id="ember257" class="ember-view ember-text-field" type="text"
       title="Name">

To enable support for data attributes an attribute binding must be added to the component, e.g. Ember.LinkComponent or Ember.TextField for the specific attribute:

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

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

Now the same template above renders the following 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">

© 2017 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.
https://guides.emberjs.com/v2.13.0/templates/binding-element-attributes

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部