Ember.js 入门指南——handlebars属性绑定
来源:互联网 发布:阿里云大厦t2栋3楼 编辑:程序博客网 时间:2024/05/08 11:35
本文从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版本的写法还在学习中,后续在补上,现在为了演示模板效果暂时这么写!毕竟本文的重点还是在模板属性的绑定上 // 绑定inputEmber.TextField.reopen({ attributeBindings: ['data-toggle', 'data-placement']}); // // 绑定link-toEmber.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这个文件的代码有点奇葩了……希望读者们不吝赐教!
- Ember.js 入门指南——handlebars属性绑定
- Ember.js 入门指南——handlebars基础
- Ember.js 入门指南——handlebars条件表达式
- Ember.js 入门指南——handlebars遍历标签
- Ember.js 入门指南——handlebars显示对象的键(未完待续)
- Ember.js 入门指南——绑定(bingding)
- Ember.js 入门指南——属性传递
- Ember.js 入门指南——目录
- Ember.js 入门指南——计算属性(compute properties)
- Ember.js 入门指南——扩展(reopen)
- Ember.js 入门指南——观察者(observer)
- Ember.js 入门指南——枚举(enumerables)
- Ember.js 入门指南——{{link-to}} 助手
- Ember.js 入门指南——{{action}} 助手
- Ember.js 入门指南——表单元素
- Ember.js 入门指南——调试助手
- Ember.js 入门指南——工具类的助手
- Ember.js 入门指南——路由简介
- 奖学金-贪心算法
- Single Number III
- 【读书笔记】iOS-类别
- 使用 ASP.NET 和 WCF 4.0 开发 RESTful 服务
- linux环境下的网络配置
- Ember.js 入门指南——handlebars属性绑定
- iOS开发:UISCrollView与UITableView嵌套使用终极解决方案
- POJ2947 Widget Factory【高斯消元】【同余方程】
- 黑马程序员——Java异常机制
- 正确理解cookie和session机制原理
- ubuntu系统升级
- 零基础学python-17.4 参数匹配应用实例
- ssoj1750小K 的农场(差分约束系统)
- 二叉树深度优先遍历和广度优先遍历