×

EmberJS 教程

EmberJS 概述EmberJS 环境配置EmberJS 应用EmberJS 对象模型EmberJS 模板EmberJS 路由器EmberJS 组件EmberJS 模型EmberJS 视图EmberJS 控制器EmberJS 测试EmberJS 指定查询参数

Ember 对象模型

Ember 类的定义 初始化 继承Ember 类的扩展Ember 计算属性Ember 观察者Ember 数据绑定Ember 枚举Ember 第一章对象模型小结

Ember handlebars模板

Ember handlebars基础Ember handlebars条件表达式Ember handlebars遍历标签Ember handlebars显示对象键Ember handlebars属性绑定Ember {{link-to}} 助手Ember 路由 模板执行渲染顺序Ember {{action}} 助手Ember 表单元素Ember 调试助手Ember 工具类的助手Ember 第二章模板小结

Ember 路由

Ember 路由定义Ember 指定与路由关联的模型Ember 模板渲染Ember 路由重定向Ember 路由终止挑战和激活Ember loading error子路由Ember 查询参数Ember 异步路由

Ember 组件

Ember 组件定义Ember 属性传递Ember 包裹内容自定义包裹组件的HTML标签Ember 处理事件Ember action触发变化

Ember 控制器

Ember 控制器Ember 管理控制器的依赖关系

Ember 模型

Ember model简介Ember 定义模型Ember 记录查询Ember 新建、更新、删除记录Ember 设置记录到StoreEmber model的关联关系处理Ember 元数据Ember 自定义适配器Ember 自定义序列号器

Ember 测试

Ember 测试简介Ember 验收测试Ember 单元测试

Ember 枚举


Ember中,枚举是包含多个子对象的对象,并且提供了丰富的API(Ember.Enumerable API)去获取所包含的子对象。Ember的枚举都是基于原生的javascript数组实现的,Ember扩展了其中的很多接口。 Ember提供一个标准化接口处理枚举,并且允许开发者完全改变底层数据存储,而无需修改应用程序的数据访问代码。 EmberEnumerable API尽可能的遵照ECMAScript规范。为了减少与其他库不兼容,Ember允许你使用本地浏览器实现数组。

下面是一些重要而常用的API列表;请注意左右两列的不同。

标准方法 可被观察方法 说明
pop popObject 该函数从从数组中删除最后项,并返回该删除项
push pushObject 新增元素
reverse reverseObject 颠倒数组元素
shift shiftObject 把数组的第一个元素从其中删除,并返回第一个元素的值
unshift unshiftObject 可向数组的开头添加一个或更多元素,并返回新的长度

详细文档请看:http://emberjs.com/api/classes/Ember.Enumerable.html

在列表上右侧的方法是Ember重写标准的JavaScript方法而得的,他们最大的不同之处是使用普通的方法(左边部分)操作的数组不会在你的应用程序中自动更新(不会触发观察者),而使用Ember重写过的方法则可以触发观察者,只要你的数据有变化Ember就可以观察到,并且更新到模板上。

常用API

1,数组迭代器

遍历数组元素使用forEach方法。

var arr = ['chen', 'ubuntuvm', '1527254027@qq.com', 'i2cao.xyz', 'ubuntuvim.xyz'];
arr.forEach(function(item, index) {
  console.log(index+1 + ", " +item);
});

2,获取数组首尾元素

//  获取头尾的元素,直接调用Ember封装好的firstObject和lastObject方法即可
console.log('The firstItem is ' + arr.get('firstObject'));  // output> chen
console.log('The lastItem is ' + arr.get('lastObject'));  //output> ubuntuvim.xyz

3,map方法

//  map方法,转换数组,并且可以在回调函数里添加自己的逻辑
//  map方法会新建一个数组,并且返回被转换数组的元素
var arrMap = arr.map(function(item) {
  return 'map: ' + item;  //  增加自己的所需要的逻辑处理
});
arrMap.forEach(function(item, index) {
  console.log(item);
});
console.log('-----------------------------------------------');

4,mapBy方法

// mapBy 方法:返回对象属性的集合,
// 当你的数组元素是一个对象的时候,你可以根据对象的属性名获取对应值
var obj1 = Ember.Object.create({
  username: '123',
  age: 25
});

var obj2 = Ember.Object.create({
  username: 'name',
  age: 35
});
var obj3 = Ember.Object.create({
  username: 'user',
  age: 40
});

var obj4 = Ember.Object.create({
  age: 40
});

var arrObj = [obj1, obj2, obj3, obj4];  //对象数组
var tmp = arrObj.mapBy('username');  // 

tmp.forEach(function(item, index) {
  console.log(index+1+", "+item);
});

console.log('-----------------------------------------------');

5,filter方法

//  filter 过滤器方法,过滤普通数组元素
//  filter方法可以跟你指定的条件过滤掉不匹配的数据,比如下面的代码:过滤了元素大于4的元素
var nums = [1, 2, 3, 4, 5];
//  参数self值数组本身
var numsTmp = nums.filter(function(item, index, self) {
    return item < 4;
});

numsTmp.forEach(function(item, index) {
  console.log('item = ' + item);  //  1, 2, 3
});
console.log('-----------------------------------------------');

filter方法会返回所有判断为true的元素,会把判断结果为false或者undefined的元素过滤掉。

6,filterBy方法

//  如果你想根据对象的某个属性过滤数组你需要用filterBy方法,比如下面的代码根据isDone这个对象属性过滤
var o1 = Ember.Object.create({
  name: 'u1',
  isDone: true
});

var o2 = Ember.Object.create({
  name: 'u2',
  isDone: false
});

var o3 = Ember.Object.create({
  name: 'u3',
  isDone: true
});

var o4 = Ember.Object.create({
  name: 'u4',
  isDone: true
});

var todos = [o1, o2, o3, o4];
var isDoneArr = todos.filterBy('isDone', true);  //会把o2过滤掉
isDoneArr.forEach(function(item, index) {
  console.log('name = ' + item.get('name') + ', isDone = ' + item.get('isDone'));
  // console.log(item);
});

console.log('-----------------------------------------------');

filterfilterBy不同的地方是前者可以自定义过滤逻辑,后者可以直接使用。

7,every、some方法

// every、some 方法
// every 用于判断数组的所有元素是否符合条件,如果所有元素都符合指定的判断条件则返回true,否则返回false
// some 用于判断数组的所有元素只要有一个元素符合条件就返回true,否则返回false
Person = Ember.Object.extend({
  name: null,
  isHappy: true
});
var people = [
  Person.create({ name: 'chen', isHappy: true }),
  Person.create({ name: 'ubuntuvim', isHappy: false }),
  Person.create({ name: 'i2cao.xyz', isHappy: true }),
  Person.create({ name: '123', isHappy: false }),
  Person.create({ name: 'ibeginner.sinaapp.com', isHappy: false })
];
var every = people.every(function(person, index, self) {
  if (person.get('isHappy'))
    return true;
});
console.log('every = ' + every);

var some = people.some(function(person, index, self) {
  if (person.get('isHappy'))
    return true;
});
console.log('some = ' + some);

8,isEvery、isAny方法

//  与every、some类似的方法还有isEvery、isAny 
console.log('isEvery = ' + people.isEvery('isHappy', true));  //  全部都为true,返回结果才是true
console.log('isAny = ' + people.isAny('isHappy', true));  //只要有一个为true,返回结果就是true

上述方法的使用与普通JavaScript提供的方法基本一致。学习难度不大……自己敲两边就懂了!

这些方法非常重要,请一定要学会如何使用!!!
博文完整代码放在Github(博文经过多次修改,博文上的代码与github代码可能又出入,不过影响不大!),如果你觉得博文对你有点用在github项目上给我个star吧。您的肯定对我来说是最大的动力!!


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)