May 09, 2021 Ember.js Reference documents
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
<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.
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">
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!!