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

2.4 观察者模式

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

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

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

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

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

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

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

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

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

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

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

时间: 2024-11-02 13:24:21

《Ember.js实战》——2.4 观察者模式的相关文章

《Ember.js实战》——导读

前言 2006年起,我已经以某种方式进行Web应用开发.我开始为挪威最大的零售商开发Web应用,先是使用JavaServer Pages(JSP)技术,之后换成JavaServer Faces(JSF).当时这些技术很不错,并能让使用者达到使用目的.在那时(Ajax流行之前),HTTP的请求-响应周期要求将大多数处理逻辑放在服务器端,服务器端在每次请求中传递所有标记.脚本和样式表给浏览器. 虽然以服务器端方式开发Web应用也能行之有效,但状态问题总是绕不开的.由于服务器端要求记住所有登录用户,管

《Ember.js实战》——2.3 计算属性

2.3 计算属性 计算属性是一个函数,其返回一个从其他变量或表达式(也可以是其他计算属性)获取的值.计算属性与普通JavaScript函数之间的区别在于,Ember.js将计算属性看作其真正的属性.因此,就可以在计算属性上调用get()和set()等`方法,以及绑定/观察它们(观察者概念在本章稍后介绍).通常,在模型对象中定义计算属性,并在控制器和视图中使用它. 目前的记事本应用程序还没用上计算属性,但如果你想增强应用程序功能,在界面左边的事项列表中显示每条事项前20个字符的内容,那么,就请忘掉

《Ember.js实战》——第2章 Ember.js风格 2.1 绑定对象

第2章 Ember.js风格 本章涵盖的内容 绑定的工作方式,以及它们对编程风格的影响 自动更新模板的使用 如何及何时使用计算属性及观察者(Observer)模式 Ember.js对象及类模型 本章将在第1章代码的基础上详细阐述Ember.js框架中最具特色的知识点.Ember.js最关键的设计目标之一就是提供完整.合理的默认实现以避免开发者必须自己创建大量样板代码.Ember.js通过默认设置来满足大多数Web应用的需要,并允许开发者在合适之处轻松覆写这些默认设置.有了这些完备选择,我们就可以

《Ember.js实战》——1.4 第一个Ember.js应用程序:记事本应用

1.4 第一个Ember.js应用程序:记事本应用 记事本应用大约有200行程序代码(包括模板和JavaScript代码)以及130行CSS代码.你完全可以在Windows.Mac以及Linux等各种操作系统上使用你喜爱的编辑器来开发并运行这个应用. 提示 我使用JetBrains WebStorm来编写JavaScript应用,但这对你来说不是必需的. 你将通过编写一个简单的记事本Web管理应用来一探Ember.js.该应用功能如下. 添加新事项--应用提供了用户添加事项的专用区域. 选择.查

《Ember.js实战》——1.3 Ember.js概览

1.3 Ember.js概览 Ember.js起源于SproutCore框架的第二个版本.在SproutCore 2.0开发期间,SproutCore团队成员已经清楚地认识到,如果想要创建满足目标广泛的Web应用程序的需要,并且体积还保持小巧的易用框架,SproutCore框架的底层结构就需要有个根本改变. SproutCore简介 SproutCore是一个用高度面向组件编程模型开发出来的框架.SproutCore的大多数概念都是从Apple的Cocoa借鉴来的,而Apple也使用Sprout

《Ember.js实战》——2.5 Ember.js对象模型

2.5 Ember.js对象模型 Ember.js扩展了JavaScript默认对象类的定义,以构建一个更强大的对象模型.此外,Ember.js还支持基于混入类的方式,在模块与模块之间.应用与应用之间共享代码. 你可能想了解Ember.js是怎样知道某个属性发生改变的,以及它何时触发观察者函数和绑定对象.同时你可能还注意到,Ember.js总是要求使get()和set()方法来获取或修改Ember.Object子类对象的属性.当在一个属性上调用set()方法,Ember.js就会检查更新值与对象

《Ember.js实战》——2.6 Ember.js实现各层间数据同步

2.6 Ember.js实现各层间数据同步 本章前面我们看到了一个数据同步模型,其可以确保数据始终在客户端和服务器端之间保持同步(见图2-2).在这个模型中,应用程序8个步骤中就有6个需要显式跟踪并关注应用程序内部状态.反观Ember.js框架如何使用绑定.控制器以及清晰的模型层来尽可能多地自动化样板代码,孰优孰劣就很清楚了.图2-8展示了一个改进后的概念模型. Ember.js方式的步骤减少了,这是因为我们把更多的样板代码留给了Ember.js框架,而你仍完全掌控着应用的数据流.与前面模型相比

《Ember.js实战》——2.2 自动更新模板

2.2 自动更新模板 Ember.js默认使用Handlebars.js模板引擎.Ember Handlebars实现的一个关键点是无论何时将模板与底层数据联系起来,Ember.js都会在应用各层之间创建双向绑定.在第1章记事本应用程序开发过程中你已经了解了相关工作机制. 思考一下代码清单2-2里的notes/note模板代码. 代码清单2-2 重访notes/note模板 这个示例中包含了两种绑定,第一种是通过Handlebars表达式实现模板绑定:第二种是通过Binding关键字在自定义视图

《Ember.js实战》——1.2 从静态页面到Ajax、再到全功能Web应用

1.2 从静态页面到Ajax.再到全功能Web应用 从20世纪90年代中期引入万维网(WWW或W3),到21世纪00年代中期Ajax出现之前,大多数的网站本质上是静态网站.服务器端通过一个HTTP响应来应答所有HTTP页面请求,该响应包含了显示一个完整页面所需的全部HTML.CSS和JavaScript代码,如图1-3左半部分所示. 虽然许多网站仍然如图1-3左半部分所示那样,依赖于整页刷新的方式,但越来越多的开发者都在创建动态内容.今天,用户希望在体验网站时能够做到页面不要刷新. 1.2.1