Ember.js 入门指南——绑定(bingding)
2015-09-09 09:57
671 查看
本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。
正如其他的框架一样Ember也包含了多种方式绑定实现,并且可以在任何一个对象上使用绑定。也就是说,绑定大多数情况都是使用在Ember框架本身,对于开发最好还是使用计算属性。
需要注意的是绑定并不会立刻更新对应的值,Ember会等待直到程序代码完成运行完成并且是在同步改变之前。所以你可以多次改变计算属性的值,由于绑定是很短暂的所以也不需要担心开销问题。
正如其他的框架一样Ember也包含了多种方式绑定实现,并且可以在任何一个对象上使用绑定。也就是说,绑定大多数情况都是使用在Ember框架本身,对于开发最好还是使用计算属性。
1,双向绑定
// 双向绑定 Wife = Ember.Object.extend({ householdIncome: 800 }); var wife = Wife.create(); Hasband = Ember.Object.extend({ // 使用 alias方法实现绑定 householdIncome: Ember.computed.alias('wife.householdIncome') }); hasband = Hasband.create({ wife: wife }); console.log('householdIncome = ' + hasband.get('householdIncome')); // output > 800 // 可以双向设置值 // 在wife方设置值 wife.set('householdIncome', 1000); console.log('householdIncome = ' + hasband.get('householdIncome')); // output > 1000 // 在hasband方设置值 hasband.set('householdIncome', 10); console.log('wife householdIncome = ' + wife.get('householdIncome'));
需要注意的是绑定并不会立刻更新对应的值,Ember会等待直到程序代码完成运行完成并且是在同步改变之前。所以你可以多次改变计算属性的值,由于绑定是很短暂的所以也不需要担心开销问题。
2,单向绑定
单向绑定只会在一个方向上传播变化。相对双向绑定来说,单向绑定做了性能优化,所以你可以安全的使用双向绑定,对于双向绑定如果你只是在一个方向上关联其实就是一个单向绑定。var user = Ember.Object.create({ fullName: 'Kara Gates' }); UserComponent = Ember.Component.extend({ userName: Ember.computed.oneWay('user.fullName') }); userComponent = UserComponent.create({ user: user }); console.log('fullName = ' + user.get('fullName')); // 从user可以设置 user.set('fullName', "krang Gates"); console.log('component>> ' + userComponent.get('userName')); // UserComponent 设置值,user并不能获取,因为是单向的绑定 userComponent.set('fullName', "ubuntuvim"); console.log('user >>> ' + user.get('fullName'));
相关文章推荐
- Ember.js 入门指南——绑定(bingding)
- js正则表达式基本语法(精粹)
- js小案例
- js正则表达式验证大全(收集)
- js中将 整数转成字符,,将unicode 编码后的字符还原出来的方法。
- 【JavaScript】操作Canvas画图
- js解决onkeydown长按按键卡顿一下
- Javascript作用域和变量提升
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
- ob_end_clean()会干扰jsalert的弹出
- CommonJS,AMD,CMD
- js获取浏览器滚动条距离顶端的距离
- 用Javascript获取页面元素的位置
- 20150908 javascript实现来回滚动的小球
- 纯javascript代码实现计算器功能(三种方法)
- js实现全国省份城市级联下拉菜单效果代码
- 原生JS实现美图瀑布流布局赏析
- js实现可折叠展开的手风琴菜单效果
- js调用百度地图及调用百度地图的搜索功能
- js+css实现超简洁的二级下拉菜单效果代码