《Ember.js实战》——2.4 观察者模式-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Ember.js实战》——2.4 观察者模式

简介: 从概念上讲,单向绑定包含一个观察者与一个setter,双向绑定包含两个观察者与两个setter。观察者在不同语言和框架中有不同的称谓和实现。在Ember.js里,一个观察者就是一个JavaScript函数,无论其观察的变量何时更新,都会触发该函数的调用。

本节书摘来自异步社区《Ember.js实战》一书中的第2章,第2.4节,作者:【挪】Joachim Haagen Skeie(乔基姆•哈根•斯基)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.4 观察者模式

从概念上讲,单向绑定包含一个观察者与一个setter,双向绑定包含两个观察者与两个setter。观察者在不同语言和框架中有不同的称谓和实现。在Ember.js里,一个观察者就是一个JavaScript函数,无论其观察的变量何时更新,都会触发该函数的调用。在绑定较难实现或希望在某个值发生改变时执行某个任务的场景中,比较适合使用观察者模式。

要实现一个观察者,请使用.addObserver()方法,或者使用内联的observes()方法后缀。代码清单2-6展示了观察者的一种使用方式。基于控制器的content数组的项数,启动并停止计时器。

代码清单2-6 观察控制器内容长度并控制计时器
screenshot

观察者contentObserver是一个普通的JavaScript方法,其首先获取控制器的content数组。如果存在content数组项且计时器未启动,则创建一个新的计时器,时间间隔设为15 000 ms。计时器里将遍历每个数组项,并通过自定义的reload()方法来重新加载数组项数据。如果content数组为空,则停止已有计时器。

要让contentObserver函数成为一个观察者,我们添加了内联的observes()方法,并添加被观察属性。

可以使用替代的addObserver()方法来重构上面的观察者。函数的主体代码部分都是一样的,但声明稍有不同,如代码清单2-7所示。

代码清单2-7 通过.addObserver方法创建观察者

screenshot

虽然这是一种创建观察者的可能方式,但我发现如代码清单2-6的内联方式更清晰并更具可读性。我也习惯为观察者函数添加Observer后缀,当然这不是必须的。

有时你可能想观察数组项的属性,在记事本应用里,Notes.NotesController有一个Ember对象组成的content数组,该对象有两个属性:name和value。为了观察每个对象的name属性,可以使用@each来遍历被观察属性,如代码清单2-8所示。

代码清单2-8 通过@each观察数组项的改变

screenshot

有了Ember.js对象模型,本章的所有功能才可能得以实现,接下来具体了解Ember.js对象模型。

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章