Ember支持监视任何属性,包括计算的属性。你可以使用Ember.observer为一个对象设置一个监视者:

Person = Ember.Object.extend({
//these will be supplied by 'create'
firstName: null,
lastName: null, fullName: Ember.computed('firstName', 'lastName', function () {
var firstName = this.get('firstName');
var lastName = this.get('lastName'); return firstName + ' ' + lastName;
}); fullNameChanged: Ember.Observer('fullName', function () {
//deal with the change
});
}); var person = Person.create({
firstName: 'Yehuda',
lastName: 'Katz'
}); person.set('firstName', 'Brohuda'); // observer will fire
  • 因为计算的属性fullName依赖于firstName,更新firstName也会启动fullName的监视者。

一、Observers and Asynchrony(监视者和异步)

1. Ember中的监视者目前是同步的。这意味着一旦监视到其中一个属性改变它们就会启动。它很容易解释属性还未同步的bugs。

Person.reopen({
lastNameChanged: Ember.observer('lastName', function () {
//监视者依赖lastName和fullName。因为监视者是同步的,
//当方法被调用时,fullName的值还没有被更新,所以会输出它之前的值
console.log(this.get('fullName'));
});
});

2. 当监视多个属性的时候,这种同步的行为也可以导致监视者被启动多次。

Person.reopen({
partOfNameChanged: Ember.observer('firstName, 'lastName', function () {
//因为firstNam和lastName都被设置了,这个监视者将会被启动两次。
});
}); person.set('firstName', 'John');
person.set('lastName', 'Smith');

3. 为了克服这些问题,你应该使用Ember.run.once。一旦所有绑定是同步的,这将确保任何处理你的需求仅会发生一次并发生在下一个循环:

Person.reopen({
partOfNameChanged: Ember.observer('firstName', 'lastName', function() {
Ember.run.once(this, 'processFullName');
}), processFullName: Ember.observer('fullName', function() {
// This will only fire once if you set two properties at the same time, and
// will also happen in the next run loop once all properties are synchronized
console.log(this.get('fullName'));
})
}); person.set('firstName', 'John');
person.set('lastName', 'Smith');

二、Observers and Object Initialization

1. 监视者不会启动直到对象初始化完成以后。

如果你需要监视者启动作为初始化程序的一部分,你不能依靠set的作用。相反,通过使用Ember.on()指定监视者应该在init之后运行。

Person = Ember.Object.extend({
init: function() {
this.set('salutation', 'Mr/Ms');
}, salutationDidChange: Ember.on('init', Ember.observer('salutation', function(){
//some side effect of salutation changing
}));
});

三、剩余的计算属性不触发监视者

1. 如果你从来没有get一个计算属性,尽管它依赖的keys变化了,它的监视者也不会启动。你可以理解为值从一个位置的值变为了另一个。

2. 这通常不会影响应用程序代码,因为当它们被获取的时候计算属性几乎总是在同一时间被监视。例如,你获得了计算属性的值,把它放到DOM中,然后监视它,这样一旦属性变化你就会更新DOM。

3. 如果你需要监视计算属性但是目前没有检索它,仅仅是在你的init方法中获取它。

四、Outside of Class Definitions(在类定义的外面)

你也可以使用addObserver在类定义的外面为一个对象添加监视着。

person.addObserver('fullName', function(){
//deal with the change
});

2.5 The Object Model -- Observers的更多相关文章

  1. Selenium的PO模式(Page Object Model)[python版]

     Page Object Model 简称POM  普通的测试用例代码: .... #测试用例 def test_login_mail(self): driver = self.driver driv ...

  2. 在C#开发中如何使用Client Object Model客户端代码获得SharePoint 网站、列表的权限情况

    自从人类学会了使用火,烤制的方式替代了人类的消化系统部分功能,从此人类的消化系统更加简单,加速了人脑的进化:自从SharePoint 2010开始有了Client Side Object Model ...

  3. Selenium的PO模式(Page Object Model)|(Selenium Webdriver For Python)

            研究Selenium + python 自动化测试有近两个月了,不能说非常熟练,起码对selenium自动化的执行有了深入的认识. 从最初无结构的代码,到类的使用,方法封装,从原始函数 ...

  4. 解决在使用client object model的时候报“object does not belong to a list”错误

    在查看别人代码的时候,发现了个有意思的问题,使用client object model将一个文件check in 我使用的是如下语句获取file Microsoft.SharePoint.Client ...

  5. Page Object Model (Selenium, Python)

    时间 2015-06-15 00:11:56  Qxf2 blog 原文  http://qxf2.com/blog/page-object-model-selenium-python/ 主题 Sel ...

  6. SharePoint Client Object Model API 介绍以及工作原理解析

    CSOM和ServerAPI 的对比 SharePoint从2010开始引入了Client Object Model的API(后文中用CSOM来代替),从名字来看,我们可以简单的看出,该API是面向客 ...

  7. BOM (Browser Object Model) 浏览器对象模型

    l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存 ...

  8. 文本对象模型(Document Object Model)

    本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...

  9. 浏览器对象模型(BOM,Browser Object Model)

    本文内容     1.概述     2.windows与document     3.对话框     4.定时调用     5.URL解析与访问历史     6.浏览器和屏幕信息 ★概述     &q ...

随机推荐

  1. RIDE指定log和report的输出目录

    在命令行中,输入 pybot --help就可以看到他支持的所以命令和相关的介绍 我们可以看到outputdir这个命令,就是来知道report和log的输出目录的 如果你是在命令行中,那么直接后面跟 ...

  2. Zookeeper(二)-- 客户端操作命令

    一.前提 开启zookeeper服务端,用客户端连接.输入help,查看可使用命令,如下图所示: 操作无非就是增删改查等. 二.增加 格式:create [-s] [-e] path data acl ...

  3. 嵌入式系统UBOOT

    一个完整的嵌入式linux系统包含4部分内容:Bootloader.Parameters.Kernel.Root File System.3.4.5.6部分详细介绍了这4部分的内容,这是Linux底层 ...

  4. [译]Facebook广告基础--数字广告指南

    广告商指南 原文链接:https://www.facebook.com/business/help/337584869654348/ Ads Help - Desktop > Learn Abo ...

  5. eclipse启动错误

    1.错误日志 !SESSION 2013-12-09 12:24:33.826 -----------------------------------------------eclipse.build ...

  6. LeetCode——Populating Next Right Pointers in Each Node

    Description: Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; Tree ...

  7. 常用的jq插件

    1.时间版翻转 FlipClock-master 2.整屏切换  fullpage 3.轮播图 swiper 4.滚动条样式 mCustomScrollbar 5.过滤和排序布局插件 Isotope. ...

  8. ansible的入门级使用

      author: headsen  chen   date: 2018-08-02   11:46:35 1,ansible的安装 yum install epel-release yum -y i ...

  9. [USB] Windows USB/DVD Download Tool

    此工具为微软官方U盘启动盘制作工具 Windows USB/DVD Download Tool 说明:https://www.microsoft.com/en-us/download/windows- ...

  10. HTML5+CSS3 表格设计(Table)

    <style> body { width: 600px; margin: 40px auto; font-family: 'trebuchet MS', 'Lucida sans', Ar ...