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=& ...
随机推荐
- JavaScript 常用函数总结
javascript函数: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 .cookie函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert ...
- C# 用POST提交json数据
public void GetResponse(string url, string json) { Encoding encoding = Encoding.UTF8; byte[] data = ...
- 【转载】SQL Server 2008 r2 中 SQL语句中单引号转义
sql server有两个转义符. 默认情况下, 单引号'是字符串的边界符, 如果在字符串中包含单引号', 则必须使用两个单引号', 第1个单引号'就是转义符.
- c#datagirdview ,用DataSource 方式赋值,然后更新出问题问题
先说一下程序 主窗体 ,两个子窗体A,B.嵌入主窗体的Panel里边 主窗体,启动类C里边的查找方法,查到的值,通过事件委托送到窗体A C类里同时修改查询表,把修改的查询表通过事件委托发送给窗体B, ...
- [mk] 喝一杯咖啡, 写一写 Makefile
Makefile 是 Linux 下组织程序的一个工具,它的命令是 make. (首字母M/m都可以) [Makefile] Makefile 编写的主旋律: target: [dependency] ...
- mysql分页原理和高效率的mysql分页查询语句
该博来自网络转载!!!供自己学习使用!!! 以前我在mysql中分页都是用的 limit 100000,20这样的方式,我相信你也是吧,但是要提高效率,让分页的代码效率更高一些,更快一些,那我们又该怎 ...
- 其它数据类型和Json的转化
1.ResultSet→Json public static String resultSetToJson(ResultSet rs) throws SQLException,JSONExceptio ...
- .NET J2EE APP全局会话架构运用场景
.NET J2EE APP全局会话架构运用场景, 全局会话运用拓扑图代码核心架构为.NET架构开发C#语言为主代码架构分为全局会话中心.ASP.NET会话节点..NET会话节点针对WCF服务器与APP ...
- HDU2471_History of Languages
有意思的题目,给出两个自动机,判断这个两个自动机是否是等价的? 两个自动机是等价的,那么他们可接受的字符串集合一定是完全一样的. 于是我们可以从(0,0)开始bfs,每次看看在两个自动机上走到的两个点 ...
- 大文件下载控件(down2)-示例更新-Xproer.HttpDownloader
版权所有 2009-2016 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/down2/i ...