JSRUN 用代码说话

属性绑定

编辑教程

属性绑定

简单讲属性绑定其实就是在HTML标签内(是在一个标签的””中使用)直接使用handlebars表达式。可以直接用handlebars表达式的值作为HTML标签中某个属性的值。

准备工作: ember generate route binding-element-attributes

绑定字符串

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

在对应的route:binding-element-attributes里增加测试数据。

import Ember from 'ember';

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

运行之后模板会编译成如下代码:

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

可以看到{{model.imgUrl}}会以字符串的形式绑定到src属性上。

绑定Boolean值

在开发过程中我们经常会根据某个值判断是否给某个标签增加CSS类,或者根据某个值决定按钮是否可用等等……那么ember是怎么做的呢?? 比如下面的代码演示的是checkbox按钮根据绑定的属性isEnable的值决定是否可用。

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

如果在route里设置的值是true那么渲染之后的HTML如下:

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

否则

<input type="checkbox">

绑定data-xxx属性

默认情况下,ember不会绑定到data-xxx这一类属性上。比如下面的绑定结果就得不到你的预期。

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

模板渲染之后得到下面的HTML代码

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

可以看到data-xxx的属性都不见了!!!现在很多的前端框架都会用到data-xxx这个属性,比如bootstrap。

可以在view中指定对应的渲染组件Ember.LinkComponent和Ember.TextField(个人理解的)。

执行命令得到view文件:

ember generate view binding-element-attributes,

在view中手动绑定,如下:

//  app/views/binding-element-attributes.js

import Ember from 'ember';

export default Ember.View.extend({
});

下面是官方给的代码,明显看出这种使用方式不是2.0版本的!!

绑定input

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

绑定link-to

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

渲染之后得到的结果符合预期。得到如下HTML代码

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

data-xxx的属性正常渲染到HTML上

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟