Ember.js 入门指南——handlebars属性绑定
2019独角兽企业重金招聘Python工程师标准>>>
本文从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.jsimport 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这个文件的代码有点奇葩了……希望读者们不吝赐教!
转载于:https://my.oschina.net/ubuntuvim/blog/507065
Ember.js 入门指南——handlebars属性绑定相关推荐
- Ember.js 入门指南——查询记录
2019独角兽企业重金招聘Python工程师标准>>> store提供了统一的获取数据的接口.包括创建新记录.修改记录.删除记录等,更多有关Store API请看这个网址的介绍:ht ...
- Ember.js 入门指南——定义模型
2019独角兽企业重金招聘Python工程师标准>>> model也是一个类,它定义了向用户展示的属性和数据行为.model的定义非常简单,只需要继承DS.Model类即可,或者你也 ...
- Ember.js 入门指南——番外篇,路由、模板的执行、渲染顺序
2019独角兽企业重金招聘Python工程师标准>>> 在Ember中路由和模板的执行都是有一定顺序的,它们的顺序为:主路由à子路由1à子路由2à子路由3à--.模板渲染的顺序与路由 ...
- Ember.js 入门指南——路由切换的终止和回跳
2019独角兽企业重金招聘Python工程师标准>>> 在路由的切换过程中,Ember路由器会通过回调(beforeModel.model.afterModel.redirect)解 ...
- Ember.js 入门指南——路由重定向
2019独角兽企业重金招聘Python工程师标准>>> 声明:对于transition这个词直译是"过渡"的意思,但是总觉得"路由的过渡"读起 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南--类的定义.初始化.继承 Ember.js 入门指南--类的扩展(reopen) Ember.js 入门指南--计算属性(compute properti ...
- 物理世界的互动之旅:Matter.js入门指南
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 本文简介 戴尬猴,我是德育处主任 欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
- d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
- Three.js入门指南
1.threejs导入3d模型到web端,3d模型的文件格式可以找个建模软件转化为threejs所支持的格式,如.dae .obj .mtl stl gld等 harp.gl 3D地图渲染引擎 key ...
最新文章
- jAVA not find main_java编程时出现Could not find the main class 怎么解决???
- python类型转换astype-numpy数据类型dtype转换
- dbref java_查询mongodb dbref内部字段
- Building A New Barn(POJ-3269)
- build shop
- MFC 进行界面设计与编程
- CVE-2020-11946 ManageEngine OpManager 命令执行
- gmp计算机分类,GMP附录——计算机化系统汇总.pptx
- element ui table样式
- 上方用计算机英文,教你Win10计算器应用变成英文的解决方法
- 阿里、腾讯裁员,2022金三银四Android开发该何去何从?
- 【Android -- 开源库】Gson 的基本使用
- JavaScript高级编程设计(第三版)——第三章:基本概念
- 计算机三级网络几时出成绩,全国计算机等级考试成绩查询时间是什么时候?
- 蓝桥杯javaB三羊献瑞
- Peter Schiff:如果大饼跌破3万刀,那么它将跌破1万
- 不是封闭的类Java
- 计算机错误 爱普生,爱普生打印机的常见故障及解决方法
- 虚拟化基础-华为云计算虚拟化
- Chinaz下载量最多的十个商城系统