Ember.js 入门指南——handlebars属性绑定

本文从http://www.ibeginer.sinaapp.com迁移过来，欢迎访问原页面。

    简单讲属性绑定其实就是在HTML标签内（是在一个标签的”<”和“>”中使用）直接使用handlebars表达式。能够直接用handlebars表达式的值做为HTML标签中某个属性的值。

准备工做：ember generate route binding-element-attributes

1，绑定字符串

<!-- //  app/templates/binding-element-attribute.hbs   -->
 
<div id="logo">
       <img   src={{model.imgUrl}} alt='logo' />
</div>

在对应的route里增长测试数据。

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属性上。

1，绑定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">

 

2，绑定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-这个属性，好比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版本的！！
//  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上了。

 

       本文介绍了几个经常使用的属性绑定方式，很是之实用！可是有点遗憾本人能力有限还没理解到最后一个实例在Ember2.0版中是怎么使用的，如今的代码是根据我的理解把指定组件的代码放在view，官方教程给的也不是Ember2.0版的，因此binding-element-attributes.js这个文件的代码有点奇葩了……但愿读者们不吝赐教！