- Ember.js 指南
- 入门指南 - 介绍
- 入门指南 - 应用规划
- 入门指南 - 创建静态页面
- 入门指南 - 获取Ember.js和相应依赖
- 入门指南 - 添加第一个路由与模板
- 入门指南 - 建立模型
- 入门指南 - 使用静态数据
- 入门指南 - 显示模型数据
- 入门指南 - 显示模型的完成状态
- 入门指南 - 创建新的模型实例
- 入门指南 - 标记模型为完成或未完成
- 入门指南 - 显示未完成待办事项的数量
- 入门指南 - 切换显示和编辑状态
- 入门指南 - 接受修改
- 入门指南 - 删除模型
- 入门指南 - 添加子路由
- 入门指南 - 显示未完成待办事项
- 入门指南 - 显示已完成待办事项
- 入门指南 - 显示所有待办事项
- 入门指南 - 添加移除所有已完成待办事项的按钮
- 入门指南 - 提示所有待办事项已完成
- 入门指南 - 切换已完成和未完成待办事项
- 入门指南 - 更换FixtureAdapter
- 获取 Ember - 获取Ember
- 概念 - 核心概念
- 概念 - 命名惯例
- 对象模型 - 类与实例
- 对象模型 - 计算属性
- 对象模型 - 计算属性和带@each的集合数据
- 对象模型 - 观察器
- 对象模型 - 绑定
- 对象模型 - 重新打开类和实例
- 对象模型 - 绑定,观察器,计算属性:如何选择?
- 应用 - 介绍
- 模板 - 应用模板
- 模板 - Handlebars基础
- 模板 - 条件表达式
- 模板 - 显示项目列表
- 模板 - 切换作用域
- 模板 - 绑定元素属性
- 模板 - 绑定元素类名称
- 模板 - 链接
- 模板 - 操作
- 模板 - 输入助手
- 模板 - 开发助手
- 模板 - 用助手来渲染
- 模板 - 编写助手方法
- 路由 - 介绍
- 路由 - 定义路由
- 路由 - 生成的对象
- 路由 - 指定路由的模型
- 路由 - 设置控制器
- 路由 - 渲染模板
- 路由 - 重定向
- 路由 - 指定地址API
- 路由 - 查询参数
- 路由 - 异步路由
- 路由 - 加载中/错误子状态
- 路由 - 阻止和重试过渡
- 组件 - 介绍
- 组件 - 定义组件
- 组件 - 传递属性
- 组件 - 包裹内容
- 组件 - 自定义组件元素
- 组件 - 使用Action处理用户交互
- 组件 - 从组件发送操作给应用
- 控制器 - 介绍
- 控制器 - 代表单一模型
- 控制器 - 代表多模型
- 控制器 - 管理控制器间的依赖
- 模型 - 介绍
- 模型 - 定义模型
- 模型 - 创建和删除记录
- 模型 - 将记录推入仓库
- 模型 - 持久化记录
- 模型 - 查询记录
- 模型 - 使用记录
- 模型 - 使用Fixture
- 模型 - 连接HTTP服务器
- 模型 - 处理元数据
- 模型 - 自定义适配器
- 模型 - 常见问题
- 视图 - 介绍
- 视图 - 定义视图
- 视图 - 处理事件
- 视图 - 在模板中插入视图
- 视图 - 为视图添加布局
- 视图 - 自定义视图元素
- 视图 - 内置视图
- 视图 - 手动管理视图层级
- 枚举 - 介绍
- 测试 - 介绍
- 测试 - 集成测试
- 测试 - 测试助手
- 测试 - 测试用户交互
- 测试 - 单元测试
- 测试 - 单元测试基础
- 测试 - 测试组件
- 测试 - 测试控制器
- 测试 - 测试路由
- 测试 - 测试模型
- 测试 - 自动化测试
- 配置Ember.js - 禁用基本类型扩展
- 配置Ember.js - 嵌入式应用
- 配置Ember.js - 特性标识
- Cookbook - 简介
- Cookbook - 用户界面与交互
- Cookbook - 事件处理和数据绑定
- Cookbook - 助手与组件
- Cookbook - 使用对象
- 理解Ember.js - 视图层
- 理解Ember.js - 管理异步
- 理解Ember.js - 模板自动更新
- 理解Ember.js - 调试
- 理解Ember.js - 运行循环
枚举 - 介绍
英文原文:http://emberjs.com/guides/enumerables/
枚举
在Ember.js中,任何包含子对象集合的,并允许使用Ember.Enumerable接口来访问这些子对象的对象称为枚举。在大部分应用中最为常见的枚举是Ember.js为了确保枚举接口的一致性,而进行过扩展的Javascript的原生数组。
通过提供一个标准接口来处理枚举,Ember.js允许在不改变应用程序其他使用到枚举的部分的情况下,完全的改变数据的存储方式。
例如,在开发过程中,显示的列表条目是通过固定的测试数据来加载。当将该列表条目数据从同步的测试数据切换为从服务器延迟加载的模式来获取的时候,试图、模板和控制器代码不需要进行任何修改。
枚举API尽可能的遵从ECMAScript规范,这将与其他库的不兼容情况降至最低,并且允许Ember.js使用浏览器自身实现的数组。
例如,所有的枚举都支持标准的forEach
方法:
1 2 3 4 5 6 7 | [1,2,3].forEach(function(item) { console.log(item); }); //=> 1 //=> 2 //=> 3 |
通常情况下,类似forEach
这样的枚举方法都支持一个可选第二参数,该参数值将用作回调函数里的this
:
1 2 3 4 5 6 7 8 9 | var array = [1,2,3]; array.forEach(function(item) { console.log(item, this.indexOf(item)); }, array) //=> 1 0 //=> 2 1 //=> 3 2 |
Ember.js中的枚举
通常,代表一个列表的对象实现枚举接口。例如:
- Array - Ember采用枚举接口扩展Javascript原生
Array
(除非显示关闭prototype扩展) - Ember.ArrayController - 一种控制器其包裹了一个数组和其他一些视图层的辅助功能。
- Ember.Set - 一种数据结构其可以高效的回答是否包含某一个对象。
API概要
在本指南中,将讲述一些最为常用的枚举惯例。完整的内容请查看Ember.Enumerable API参考文档
遍历枚举
为了遍历枚举对象的所有值,可以使用forEach
方法:
1 2 3 4 5 6 7 8 9 | var food = ["Poi", "Ono", "Adobo Chicken"]; food.forEach(function(item, index) { console.log('Menu Item %@: %@'.fmt(index+1, item)); }); // Menu Item 1: Poi // Menu Item 2: Ono // Menu Item 3: Adobo Chicken |
拷贝数组
可以通过调用实现了Ember.Enumerable
接口的任意对象的toArray()
方法来将其创建一个原生的数组。
1 2 3 4 5 6 7 | var states = Ember.Set.create(); states.add("Hawaii"); states.add("California") states.toArray() //=> ["Hawaii", "California"] |
注意在很多枚举中,例如在本例中使用的Ember.Set
,生成的数组元素的顺序无法得到保证。
首尾对象
所有枚举提供firstObject
和lastObject
属性来获取首尾对象。
1 2 3 4 5 6 7 8 9 | var animals = ["rooster", "pig"]; animals.get('lastObject'); //=> "pig" animals.pushObject("peacock"); animals.get('lastObject'); //=> "peacock" |
映射
通过使用map()
方法,可以方便的转换枚举中的每个元素。该方法使用对每个元素进行处理后的结果创建一个新的数组。
1 2 3 4 5 6 | var words = ["goodbye", "cruel", "world"]; var emphaticWords = words.map(function(item) { return item + "!"; }); // ["goodbye!", "cruel!", "world!"] |
如果枚举由对象构成,那么通过mapBy()
方法可以抽取对象指定的属性,来形成一个新的数组:
1 2 3 4 5 6 7 8 9 10 11 12 | var hawaii = Ember.Object.create({ capital: "Honolulu" }); var california = Ember.Object.create({ capital: "Sacramento" }); var states = [hawaii, california]; states.mapBy('capital'); //=> ["Honolulu", "Sacramento"] |
过滤
另外一个常规任务是将一个枚举作为输入,为其设定一些过滤条件来返回一个新的数组。
对于采用filter
方法的任意过滤。如果回调方法返回true
,那么Ember将在返回结果中包含该元素,如果返回false
或者undefined
则不包含。
1 2 3 4 5 6 7 | var arr = [1,2,3,4,5]; arr.filter(function(item, index, self) { if (item < 4) { return true; } }) // returns [1,2,3] |
当处理一个Ember对象的集合时,经常需要基于对象的某些属性值来过滤。filterBy
方法可以快速的实现此过滤。
1 2 3 4 5 6 7 8 9 10 11 12 13 | Todo = Ember.Object.extend({ title: null, isDone: false }); todos = [ Todo.create({ title: 'Write code', isDone: true }), Todo.create({ title: 'Go to sleep' }) ]; todos.filterBy('isDone', true); // returns an Array containing only items with `isDone == true` |
如果只想返回第一个匹配的值,而不是一个包含所有匹配值的数组,可以使用find
和findBy
方法,其工作原理与filter
和filterBy
一样,不同的是只返回一个元素。
聚合信息(全部或者部分)
如果希望检查是否所有的枚举的元素都符合某些条件,可以使用every
方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Person = Ember.Object.extend({ name: null, isHappy: false }); var people = [ Person.create({ name: 'Yehuda', isHappy: true }), Person.create({ name: 'Majd', isHappy: false }) ]; people.every(function(person, index, self) { if(person.get('isHappy')) { return true; } }); // returns false |
如果希望检查是否枚举的元素至少有一个符合某些条件,那么可以使用some
方法:
1 2 3 4 5 | people.some(function(person, index, self) { if(person.get('isHappy')) { return true; } }); // returns true |
如同过滤方法一样,every
和some
也有isEvery
和isAny
方法。
1 2 | people.isEvery('isHappy', true) // false people.isAny('isHappy', true) // true |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论