Ember handlebars property binding

Simply put, property binding is actually using handlebars expressions directly within an HTML tag (used in the "" of a label). The value of handlebars can be used directly as the value of a property in an HTML tag.

Preparation: ember generate route binding-element-attributes

1, binding string

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

Add test data route:binding-element-attributes

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

After running, the template compiles into code like this:

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

You {{model.imgUrl}} property is src bound as a string.

2, binding the Boolean value

During development, we often judge whether to add cSS classes to a label based on a value, or to determine whether a button is available based on a value, and so on... S o how does ember do it? The following code, for example, shows checkbox button is available based on the value of the bound property isEnable. isEnable

{{! 当isEnable为true时候，disabled为true，不可用；否则可用}}
<input type='checkbox' disabled={{model.isEnable}}>

If the value set in the route is true the rendered HTML is as follows:

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

Otherwise

<input type="checkbox">

3, binding data-xxx properties

By default, ember is not bound data-xxx as data-xxx. For example, the binding results below will not get what you expect.

{{! 绑定到data-xxx这种属性需要特殊设置}}
{{#link-to 'photo' data-toggle='dropdown'}} link-to {{/link-to}}
{{input type='text' data-toggle='tooltip' data-placement='bottom' title="Name"}}

The template is rendered and the following HTML code is obtained

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

You can see that the properties of data-xxx are missing!!! D ata-xxx is now used in many data-xxx such as bootstrap S o what do we do... Y ou can specify the corresponding rendering components Ember.LinkComponent and Ember.TextField in the view. Execute the command to get the view file:
ember generate view binding-element-attributes ，
Manual binding in view, as follows:

//  app/views/binding-element-attributes.js
import 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']
});

The results obtained after rendering are in line with expectations. Get the HTML code below

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

You can see that the properties of data-xxx are rendered normally to HTML.

This article introduces several commonly used property binding methods, very practical! B ut a little regret that I have limited ability to understand how the Ember2.0 the code is now based on personal understanding of the specified component code in view, the official tutorial is not Ember2.0 binding-element-attributes.js code of this file is a bit strange ... I hope readers will not hesitate to teach!
The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit useful to you, please give me a star on the star project. Yours is definitely the biggest motivation for me!!