Object Model / Ember中的类模型
1．Objects in Ember
Ember中并没有广泛应用ES2015。
Javascript中不能动态的改变属相值，ember中用 Ember.Object 代替了原始的 object。
Ember还扩展了原始javasript中的 Array 属性，Ember.Enumerable。
同样，Ember 还扩展了 string 属性。
2．Class and instances 类和实例
2.1 Defining Classes
使用EmberObject.extend() 来定义class
使用 extend() 方法来创建一个类的子类。
2.2 重写父类的方法
通过调用this.super() 方法：
例如：
const Person = EmberObject.extend({
say(thing) {
alert(${this.get('name')} says: ${thing});
}
});
const Soldier = Person.extend({
say(thing) {
// this will call the method in the parent class (Person#say), appending
// the string ', sir!' to the variable thing passed in
this._super(${thing}, sir!);
}
});
let yehuda = Soldier.create({
name: 'Yehuda Katz'
});
yehuda.say('Yes');
2.3 向父类的方法传递参数
有时我们需要向父类的方法传递参数，使父类的方法可以正常运行。
比如常见的情况是重写 Embe-data 中的 normalizeResponse() 方法。
实现这一目的，一个方便快捷的方法是使用 spread operator ，就行 …arguments。
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
//Customize my JSON payload for Ember-Data
return this._super(...arguments);
…..
}
2.4创造实例
调用类的 create() 方法来创建一个类的实例。
创建实例时，可以在craete()中传入参数序列，例如：
let Tom = person.craete({
name: “Tom”,
gender: “male”
})
但是，在使用create() 时不能新建或改变类的方法。如果想要改变或者定义新的方法，就建立一个它的子类。
注意，一般使用大写开头的来定义类，比如Person，使用小写来定义类的实例，例如person 。
2.5 Init（）
当一个新的实例被创建时，init() 方法会被自动调用。
需要注意的是，如果我们是继承了ember中底层类，比如 Ember.Component ，当我们重写init() 的时候，一定要调用 this.super(…arguments) 。如果没有调用的话，父类的方法就有可能不能正常运行，出现各种各样的错误。
2.6由同一个类定义的实例共享类的变量。
例如：
import EmberObject from '@ember/object';
const Person = EmberObject.extend({
shoppingList: ['eggs', 'cheese']
});
Person.create({
name: 'Stefan Penner',
addItem() {
this.get('shoppingList').pushObject('bacon');
}
});
Person.create({
name: 'Robert Jackson',
addItem() {
this.get('shoppingList').pushObject('sausage');
}
});
Stefan Penner 和 Robert Jackson 两个实例中的shoppingList是一样的。
避免如此的做法是，在类中定义init()。
将 shoppingList 定义在 init() 中。
Init（）{
this.set(‘shoppingList’, [‘edge’,’cheese’];
}
2.7 改变实例中的属性
使用get() 和set() 方法，来访问和改变实例的属相值。
import EmberObject from '@ember/object';
const Person = EmberObject.extend({
name: 'Robert Jackson'
});
let person = Person.create();
person.get('name'); // 'Robert Jackson'
person.set('name', 'Tobias Fünke');
person.get('name'); // 'Tobias Fünke
3．Reopening 方法
3.1 reopening()
可以通过reoping() 方法来给一个已经定义好的类来增加一个新定义的变量。
除此之外，还能通过 reopening() 来重写一个类中存在的方法。
Person.reopen({
// override `say` to add an ! at the end
say(thing) {
this._super(thing + '!');
}
});
3.2 reopenClass()
Person.reopenClass({
isPerson: false
});
// override property of existing and future Person instances
Person.reopen({
isPerson: true
});
Person.isPerson; // false - because it is static property created by `reopenClass`
Person.create().get('isPerson'); // true
4. 可计算的属性
详情请参考官方文档。
https://guides.emberjs.com/v3.1.0/object-model/computed-properties/
5．复杂的属性
5.1
有时候一个复杂的属性只有当向中增加数据时才会更新、删除、或者是奉更改。
我们可以是用 [] 来使属性在正确的时间更新。
例如：
import EmberObject, { computed } from '@ember/object';
import Component from '@ember/component';
export default Component.extend({
todos: null,
init() {
this.set('todos', [
EmberObject.create({ title: 'Buy food', isDone: true }),
EmberObject.create({ title: 'Eat food', isDone: false }),
EmberObject.create({ title: 'Catalog Tomster collection', isDone: true }),
]);
},
titles: computed('todos.[]', function() {
let todos = this.get('todos');
return todos.mapBy('title');
})
});
5.2 @each
就像上边的代码中，当todos 中的某一条数据的 isDone 发生了变化，那么是不会引起页面的重新渲染的，但是我们希望isDone 的值发生变化时，页面能更新，我们可以使用@each 来解决这个问题。
import EmberObject, { computed } from '@ember/object';
import Component from '@ember/component';
export default Component.extend({
todos: null,
init() {
this.set('todos', [
EmberObject.create({ isDone: true }),
EmberObject.create({ isDone: false }),
EmberObject.create({ isDone: true }),
]);
},
incomplete: computed('todos.@each.isDone', function() {
let todos = this.get('todos');
return todos.filterBy('isDone', false);
})
});
当然，@each 可以设置绑定为多个数据。
todos.@each.{priority,title}
5.3 computed.filterBy
筛选出符合的属性，返回一个数组。
import EmberObject, { computed } from '@ember/object';
import { filterBy } from '@ember/object/computed';
import Component from '@ember/component';
export default Component.extend({
todos: null,
init() {
this.set('todos', [
EmberObject.create({ isDone: true }),
EmberObject.create({ isDone: false }),
EmberObject.create({ isDone: true }),
]);
},
incomplete: filterBy('todos', 'isDone', false)
});
import TodoListComponent from 'app/components/todo-list';
let todoListComponent = TodoListComponent.create();
todoListComponent.get('incomplete.length');
// 1
6．Observers
6.1
Ember支持观察所有属性，包括复杂属性。
fullNameChanged: observer('fullName', function() {
// deal with the change
console.log(`fullName changed to: ${this.get('fullName')}`);
})
Observer会监测属相值fullName， 一旦发生变化，log方法就会被执行。
6.2 在init时构建Observer
使用Ember.on
import EmberObject, { observer } from '@ember/object';
import { on } from '@ember/object/evented';
Person = EmberObject.extend({
init() {
this.set('salutation', 'Mr/Ms');
},
salutationDidChange: on('init', observer('salutation', function() {
// some side effect of salutation changing
}))
});
需要注意的是，没有使用的计算属性不会激活Observer。
Observer还可以在类的外边定义: 使用 addObserver()
person.addObserver('fullName', function() {
// deal with the change
});
7．Bindings绑定
7.1 使用computed.alias() 来创建一个双向的绑定。
import EmberObject from '@ember/object';
import { alias } from '@ember/object/computed';
husband = EmberObject.create({
pets: 0
});
Wife = EmberObject.extend({
pets: alias('husband.pets')
});
wife = Wife.create({
husband: husband
});
wife.get('pets'); // 0
// Someone gets a pet.
husband.set('pets', 1);
wife.get('pets'); // 1
7.2 computed.oneWay()单向绑定
import EmberObject, { computed } from '@ember/object';
import Component from '@ember/component';
import { oneWay } from '@ember/object/computed';
user = EmberObject.create({
fullName: 'Kara Gates'
});
UserComponent = Component.extend({
userName: oneWay('user.fullName')
});
userComponent = UserComponent.create({
user: user
});
// Changing the name of the user object changes
// the value on the view.
user.set('fullName', 'Krang Gates');
// userComponent.userName will become "Krang Gates"
// ...but changes to the view don't make it back to
// the object.
userComponent.set('userName', 'Truckasaurus Gates');
user.get('fullName'); // "Krang Gates"
8. enumerables 枚举
详情请见官方文档：
https://guides.emberjs.com/v3.1.0/object-model/enumerables/
