Ember handlebars属性绑定

2018-01-06 17:12 更新

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

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

1,绑定字符串

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

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

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

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

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

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

2,绑定Boolean值

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

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

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

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

否则

  1. <input type="checkbox">

3, 绑定data-xxx属性

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

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

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

  1. <a id="ember455" href="/binding-element-attributes" class="ember-view active"> link-to </a>
  2. <input id="ember470" title="Name" type="text" class="ember-view ember-text-field">

可以看到data-xxx的属性都不见了!!!现在很多的前端框架都会用到data-xxx这个属性,比如bootstrap。那怎么办呢……你可以在view中指定对应的渲染组件Ember.LinkComponentEmber.TextField(个人理解的)。 执行命令得到view文件:
ember generate view binding-element-attributes
在view中手动绑定,如下:

  1. // app/views/binding-element-attributes.js
  2. import Ember from 'ember';
  3. export default Ember.View.extend({
  4. });
  5. // 下面是官方给的代码,但很明显看出来这种使用方式不是2.0版本的!!
  6. // 2.0版本的写法还在学习中,后续在补上,现在为了演示模板效果暂时这么写!毕竟本文的重点还是在模板属性的绑定上
  7. // 绑定input
  8. Ember.TextField.reopen({
  9. attributeBindings: ['data-toggle', 'data-placement']
  10. });
  11. // // 绑定link-to
  12. Ember.LinkComponent.reopen({
  13. attributeBindings: ['data-toggle']
  14. });

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

  1. <a id="ember398" href="/binding-element-attributes" data-toggle="dropdown" class="ember-view active">link-to</a>
  2. <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这个文件的代码有点奇葩了……希望读者们不吝赐教!
博文完整代码放在Github(博文经过多次修改,博文上的代码与github代码可能又出入,不过影响不大!),如果你觉得博文对你有点用,请在github项目上给我点个star吧。您的肯定对我来说是最大的动力!!

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号