《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对象模型。

相关文章
|
2月前
|
JavaScript 前端开发 开发者
深入探讨前端框架Vue.js的数据绑定原理
在前端开发中,数据绑定是Vue.js框架的核心特性之一,它实现了视图与数据的双向绑定,极大地提高了开发效率和用户体验。本文将深入探讨Vue.js数据绑定的原理,从响应式数据、依赖追踪到虚拟DOM等方面进行详细分析,帮助读者更好地理解Vue.js框架的工作机制。
23 0
|
2月前
|
存储 缓存 JavaScript
解密前端框架Vue.js的响应式原理
作为当下最流行的前端框架之一,Vue.js的响应式原理是其核心之一。本文将深入探讨Vue.js的响应式原理,从数据劫持、依赖收集到更新视图的完整流程,帮助读者更好地理解Vue.js框架的工作方式。
|
2月前
|
JavaScript 前端开发 开发者
深入理解前端框架Vue.js的数据响应式原理
本文将深入探讨Vue.js前端框架中的数据响应式原理,包括双向绑定、依赖追踪和虚拟DOM等核心概念。通过详细解析Vue.js内部实现机制,读者能够更好地理解其工作原理,并在实际开发中更灵活地运用。
|
3月前
|
JavaScript 前端开发 算法
探究前端框架Vue.js的响应式原理
本文将深入探讨前端框架Vue.js的核心特性——响应式原理。我们将介绍Vue.js中的数据绑定、依赖追踪和虚拟DOM等概念,并通过具体的示例代码解析其工作机制。通过了解Vue.js的响应式原理,开发者可以更好地利用这一特性构建灵活、高效的前端应用。
|
4月前
|
JavaScript 前端开发 开发者
JavaScript 前端框架相关:Vue.js中的双向数据绑定是如何实现的?
JavaScript 前端框架相关:Vue.js中的双向数据绑定是如何实现的?
38 1
|
4月前
|
存储 JavaScript 前端开发
Vue.js 3 的设计思路
Vue.js 3 的设计思路
30 1
|
9月前
|
JavaScript 开发者
Vue.js 响应式原理解析与实现
Vue.js 的响应式原理是其核心特性之一,它使得 Vue.js 可以在数据变化时自动更新视图。在 Vue.js 中,通过使用 `data` 选项来声明数据,当这些数据被修改时,相关的视图会自动进行更新。下面是 Vue.js 的响应式原理的解析和实现概述:
|
10月前
|
存储 JavaScript 前端开发
Vue.js的设计思路
Vue.js的设计思路
76 0
|
监控 JavaScript 前端开发
框架简介之Vue.js
vue官网说:Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 渐进式,我个人理解就是阶梯式向前。vue是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染,我就只用vue的声明渲染,而我们要用他的组件系统,我们可以引用它的组件系统。
|
JavaScript 前端开发
【Vue.js 入门与实战】--组件化和模块化的区别
一、 组件的定义 二、 组件化和模块化的不同