EmberJs之数组绑定@each&[]
写在前面
好长时间没有写博客了,昨天花了些时间又整理了下之前发布过的《Ember.js之computed Property》文章,并创建了一个测试代码库,花了些时间,希望能使用测试代码的方式,来演示如何使用Ember.js同时能避免升级Ember版本后,一些功能上的变化所带来的隐含Bug。
如果大家对Ember.js有兴趣想一起研究的话,欢迎大家一起维护测试代码库 :)
本文主要是针对Ember.Array中的[]和@each,数组方法进行详细分析。
文章索引
一、如何使用[] & @each
Ember中二者均可用于计算属性的绑定,使用十分方便,可以像如下方式定义依赖关系:
totalArea: Ember.computed('sizeArray.[]', function () {
return this.get('sizeArray').reduce(function (prev, cur) {
return prev + Ember.get(cur, 'height') * Ember.get(cur, 'width');
}, 0);
}),
或者:
totalArea: Ember.computed(‘sizeArray.@each', function () {
return this.get('sizeArray').reduce(function (prev, cur) {
return prev + Ember.get(cur, 'height') * Ember.get(cur, 'width');
}, 0);
}),
这样就定义了一个依赖于数组sizeArray的计算属性,建立一个绑定关系,只要sizeArray发生变化,totalArea就会被重新计算,使用十分简单,只要在function前面罗列出依赖的属性即可。虽然使用简单,但是在使用上还是有些细节的,下一节将用测试代码来讲解使用上的细节。
注:Ember计算属性有多种写法,这里给出了Ember推荐写法,更多具体细节请参考文章《Ember.js之computed Property-1. What is CP》
二、Array.[] & Array.@each特性总结
(Ember v1.13.7)
1. Array.@each.property 特性
当CP属性依赖于.property('columns.@each.isLoaded')时:
- columns里面任何一个元素的isLoaded属性发生变化。
- columns增加元素或者删除子元素。
- columns数组本身被重新赋值。
- 不能依赖@each.owner.@each.name 。
test('computed property depend on @each.height', function (assert) {
var Size = Ember.Object.extend({height: 0, width: 0});
var rectangle = Ember.Object.extend({
totalArea: Ember.computed('sizeArray.@each.height', function () {
return this.get('sizeArray').reduce(function (prev, cur) {
return prev + Ember.get(cur, 'height') * Ember.get(cur, 'width');
}, 0);
}),
sizeArray: [
Size.create({height: 10, width: 10}),
Size.create({height: 10, width: 10})
]
}).create();
var sizeArray = rectangle.get('sizeArray'); assert.equal(rectangle.get('totalArea'), 200, "the total area should be 200"); sizeArray.pushObject(Size.create({height: 10, width: 10}));
assert.equal(rectangle.get('totalArea'), 300, "the total area should be 300 after added"); sizeArray.removeAt(0);
assert.equal(rectangle.get('totalArea'), 200, "the total area should be 200 after removed"); sizeArray[0].set('height', 20);
assert.equal(rectangle.get('totalArea'), 300, "the total area should be 300 after 'height' changed"); sizeArray[0].set('width', 20);
assert.equal(rectangle.get('totalArea'), 300, "the total area should not be changed after 'width' changed"); sizeArray.clear();
assert.equal(rectangle.get('totalArea'), 0, "the total area should be 0 after reset rectangle.sizeArray");
});
2. Array.@each特性
当CP属性依赖于.property('columns.@each')时:
- columns增加或删除元素。
- columns自身被替换或重新赋值。
test('computed property depend on @each', function (assert) {
var Size = Ember.Object.extend({height: 0, width: 0});
var rectangle = Ember.Object.extend({
totalArea: Ember.computed('sizeArray.@each', function () {
return this.get('sizeArray').reduce(function (prev, cur) {
return prev + Ember.get(cur, 'height') * Ember.get(cur, 'width');
}, 0);
}),
sizeArray: [
Size.create({height: 10, width: 10}),
Size.create({height: 10, width: 10})
]
}).create();
var sizeArray = rectangle.get('sizeArray'); assert.equal(rectangle.get('totalArea'), 200, "the total area should be 200"); sizeArray.pushObject(Size.create({height: 10, width: 10}));
assert.equal(rectangle.get('totalArea'), 300, "the total area should be 300 after added"); sizeArray.removeAt(0);
assert.equal(rectangle.get('totalArea'), 200, "the total area should be 200 after removed"); sizeArray[0].set('height', 20);
assert.equal(rectangle.get('totalArea'), 200, "the total area should not be changed"); sizeArray.clear();
assert.equal(rectangle.get('totalArea'), 0, "the total area should be 0 after reset rectangle.sizeArray");
});
3. Array.[]特性
当CP属性依赖于.property('columns.[]')时:
- 与绑定.property(‘columns.@each') 行为相同。
test('computed property depend on []', function (assert) {
var Size = Ember.Object.extend({height: 0, width: 0});
var rectangle = Ember.Object.extend({
totalArea: Ember.computed('sizeArray.[]', function () {
return this.get('sizeArray').reduce(function (prev, cur) {
return prev + Ember.get(cur, 'height') * Ember.get(cur, 'width');
}, 0);
}),
sizeArray: [
Size.create({height: 10, width: 10}),
Size.create({height: 10, width: 10})
]
}).create();
var sizeArray = rectangle.get('sizeArray'); assert.equal(rectangle.get('totalArea'), 200, "the total area should be 200"); sizeArray.pushObject(Size.create({height: 10, width: 10}));
assert.equal(rectangle.get('totalArea'), 300, "the total area should be 300 after added"); sizeArray.removeAt(0);
assert.equal(rectangle.get('totalArea'), 200, "the total area should be 200 after removed"); sizeArray[0].set('height', 20);
assert.equal(rectangle.get('totalArea'), 200, "the total area should not be changed"); sizeArray.clear();
assert.equal(rectangle.get('totalArea'), 0, "the total area should be 0 after reset rectangle.sizeArray");
});
(Ember v2.0.0)
2015-08-17 除建议用[]代替@each,暂未发现其他变化。
[参考代码](https://github.com/emberjs/ember.js/blob/v2.0.0/packages/ember-metal/lib/computed.js#L224)
注: 更多关于计算属性问题,请参考文章《Ember.js之computed Property-3.CP重要原则》
三、源码分析Array.[] & Array.@each
Array.@each返回的是一个特殊类型,这个类型便于实现绑定。
'@each': computed(function() {
if (!this.__each) {
// ES6TODO: GRRRRR
var EachProxy = requireModule('ember-runtime/system/each_proxy')['EachProxy']; this.__each = new EachProxy(this);
} return this.__each;
})
[参考这里](https://github.com/emberjs/ember.js/blob/stable-1-13/packages/ember-runtime/lib/mixins/array.js#L516)
Array.[]继承自Ember.Enumerable.[]并且返回this。
'[]': computed({
get(key) {
return this;
},
set(key, value) {
this.replace(0, get(this, 'length'), value);
return this;
}
}),
[参考这里](https://github.com/emberjs/ember.js/blob/stable-1-13/packages/ember-runtime/lib/mixins/array.js#L164)
二者之间唯一的区别是Array.[]返回的是一对象自身(普通对象组成的数组), 而Array.@each返回的是EachProxy对象, 针对普通对象组成的数组而言,仅仅能检测到数组长度的变化和对象本身的变化,对数组内容发生变化则不得而知,而EachProxy对每一个元素增加observerListener监听器,当数组内容发生变化时,通知数组发生变更,实现了数组元素这一级别的监听。
var EachProxy = EmberObject.extend({ init(content) {
this._super(...arguments);
this._content = content;
content.addArrayObserver(this); // in case someone is already observing some keys make sure they are
// added
forEach(watchedEvents(this), function(eventName) {
this.didAddListener(eventName);
}, this);
}, ...
四、相关引用
[Ember-@each](http://emberjs.com/api/classes/Ember.Array.html#property__each)
[Emer-EachProxy](https://github.com/emberjs/ember.js/blob/stable-1-13/packages/ember-runtime/lib/system/each_proxy.js)
[Ember-study](https://github.com/Cuiyansong/ember-table-learnning)
EmberJs之数组绑定@each&[]的更多相关文章
- mvc数组绑定-jquery ajax
var list=[];//数组 list[0]=1001; list[1]=1002; list[1]=1003; var json_data = { selected: list}; $.ajax ...
- asp.net mvc int[] 和 string[] 自定义数组绑定
新建类,int[]数组模型绑定 using System; using System.Collections.Generic; using System.Linq; using System.Web; ...
- 给js创建的一个input数组绑定click事件
<html> <body> <input type="button" name="input[]" value="按钮1 ...
- 使用C# .NET 将结构数组绑定到 Windows 窗体的方法
本任务的内容 概要 要求 设计结构 向数组添加结构实例 将结构成员绑定到窗体控件 提供浏览数组的方式 分步示例 参考 概要 本文介绍如何向 Windows 窗体绑定结构数组. 该示例由一个 Win ...
- Spring MVC数组绑定
需求:商品批量删除,用户在页面选择多个商品,批量删除. 关键:将页面选择(多选)的商品id,传到controller方法的形参,方法形参使用数组接收页面请求的多个商品id // 批量删除 商品信息 @ ...
- Ng的数组绑定
tip:数据的定义需要在对应ts中进行,调用在html中 定义数组: ts中 public arr =["111","222","333"] ...
- Repeater绑定数组并显示其值
web开发中,尤其是对于数据展示,不得不说Repeater是一个万能的控件,而且使用也很方便. 在ASP.NET中将数组绑定到Repeater中请问如何在Repeater前台页面中显示该数组的值? s ...
- ASP.NET MVC数组模型绑定
在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type="text" name ...
- MVC数组模型绑定
ASP.NET MVC数组模型绑定 在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type=& ...
随机推荐
- Git 在团队中的最佳实践--如何正确使用Git Flow[转]
原文地址:http://www.cnblogs.com/cnblogsfans/p/5075073.html Git的优点 Git的优点很多,但是这里只列出我认为非常突出的几点. 由于是分布式,所有本 ...
- iOS.DistributionApp.0-build-adhoc-distribution-for-tester
Build adhoc distribution for tester 1. 提供App测试包 1.1 提供测试包的步骤 Ref[8] A: 注册所有的测试设备 B: 将App进行归档 C: 用ad ...
- JAVA第4次作业
package fuzhi; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOExc ...
- 用Action的属性接受参数
版本, @Override是Java5的元数据,自动加上去的一个标志,告诉你说下面这个方法是从父类/接口 继承过来的,需要你重写一次,这样就可以方便你阅读,也不怕会忘记@Override是伪代码,表示 ...
- linux启动执行某个脚本
如果是开机马上执行的脚本,可以将脚本写到rc.local中: 如果是用户登录后自动执行脚本,可以将脚本写到相应的用户目录下“-/.bash_profile”,若脚本“-/.bash_profile”不 ...
- PHP中spl_autoload_register函数的用法
spl_autoload_register (PHP 5 >= 5.1.2) spl_autoload_register — 注册__autoload()函数 说明bool spl_autolo ...
- iOS动画实现改变frme和contenOffset
[UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:0.4]; [UIView setAnimat ...
- MySQL 5.6 & 5.7最优配置模板
摘自:http://mp.weixin.qq.com/s?__biz=MjM5MjIxNDA4NA==&mid=207854835&idx=1&sn=c998031ae6816 ...
- mysql 中文乱码解决方法
最近在.NET 项目中用EF连接mysql,插入中文数据时老是显示乱码,在创建表时都已将编码指定了,但是还是出现乱码,折腾了一阵子才发现在连接字符串里面也要加上指定编码 Character Set=u ...
- hdoj 1869 六度分离
Problem Description 1967年,美国著名的社会学家斯坦利·米尔格兰姆提出了一个名为“小世界现象(small world phenomenon)”的著名假说,大意是说,任何2个素不相 ...