Ember.js学习笔记一

类属性的访问

Ember建议访问类的属性使用get和set方法，如果使用object.prop这种方式访问也是可以得到类的属性值，但是这个方法需要使用访问器操作，否则计算属性不能被重新计算，无法察觉对象属性得到变化，模板也不能自动更新。

//标准写法
//定义类
Person=Ember.Object.extend({
    //定义属性值
    name:'alex';
    old:'12';
    //定义方法
    show(){
        console.log("打印数据")
    }
});
//将类实例化
var person=Person.create();
//读取属性
console.log("my name is"+person.get('name'));
console.log("i am"+person.get('old')+"years old");
//调用方法
person.show();
//修改属性
person.set('name','serana');
console.log("my name is "+person.get('name'));

类属性扩展

//使用reopen()方法添加新的属性，方法。是在被扩展的类上进行添加。
//对上面的Person进行添加
Person.reopen({
    pwd:'123',
    fun1(){
        console.log("the pwd is"+this.pwd);
    },
    //新增一个计算属性
    fullname:Ember.computed(function(){
        console.log("compute method....")
    })
})
var p=Parent.create()；
p.fun1();
p.get('fullname')

Extend 和 reopen 都属于对类的扩展，但是每次调用一次extend就要重新定义一个类，这样到最后会导致类越来越多，继承树也会越来越多，对性能，调试也是一大挑战，但是extend不会改变继承类的行为，reopen是在被宽展的类的本身上新增属性，方法，会覆盖原类的行为和属性。

计算属性

计算属性就是将函数声明为属性，就类似于调用了一个函数，ember会自动调用这个函数，计算属性最大的特点就是能自动检测变化，及时更新数据。

Person = Ember.Object.extend({  
    firstName: null,
    lastName: null,
    //  fullName 就是一个计算属性
    fullName: Ember.computed('firstName', 'lastName', function() {
        return this.get('firstName') + ", " + this.get('lastName');
    })
});
//  实例化同时传入参数
var piter = Person.create({  
    firstName: 'chen',
    lastName: 'ubuntuvim'
});
console.log(piter.get('fullName'));  // output >>   chen, ubuntuvim

计算属性链

在ember程序中，计算属性还能调用另外一个计算属性，形成计算属性链。

Person = Ember.Object.extend({  
    firstName: null,
    lastName: null,
    age: null,
    county: null,
    //  fullName 就是一个计算属性
    fullName: Ember.computed('firstName', 'lastName', function() {
        return this.get('firstName') + ", " + this.get('lastName');
    }),
    description: Ember.computed('fullName', 'age', 'county', function() {
        return this.get('fullName') + " age " + this.get('age') + " county " + this.get('county');
    })
});
//  实例化同时传入参数
var piter = Person.create({  
    firstName: 'chen',
    lastName: 'ubuntuvim',
    age: 25,
    county: 'china'
});
console.log(piter.get('description'));  // output >>   chen, ubuntuvim 

当用户使用set方法改变属性值的时候，再调用get('description')得到的值也是更新后的值。