@(Ember)[MVVM|前端框架|HTML桌面应用]
序言
经常有人质疑,在前端搞MV*有什么意义?也有人跟我提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV*框架,它跟jQuery有什么区别?我jQuery用得好好的,有什么必要再引入这种框架?
其实,不管我们使用的是一个类库还是一个框架,都不应该忘记我们最终目的,或许你正在为一个项目做技术选型,或许你正在为你的应用考虑代码重构,又或许你只是单纯的想做一些学术性研究,所以框架和类库的选择没有绝对只有最适合。
以jQuery为代表,针对界面上常见的DOM操作,远程请求,数据处理等作了封装,也有专注于处理数据的Underscore,而今天的主角Ember.js正是一款为构建富HTML桌面应用的理想框架。
EMBER对象模型
Ember增强了简单的JavaScript对象模型,使之能够支持绑定和观察者,同时也支持一种更加强大的、基于混合的(mixin-based)代码共享途径。
作为最基本的形式,你可以使用Ember.Object
的extend
方法创建一个新的Ember类。
Person = Ember.Object.extend({
say: function(thing) {
alert(thing);
}
});
一旦你成功创建了一个新类,就可以使用create来创建类的实例了。类中定义的任何属性在实例中都是可用的。
var person = Person.create();
person.say("Hello") // alerts "Hello"
创建实例时,也可以通过传入对象来为实例增添额外的属性。
var tom = Person.create({
name: "Tom Dale",
helloWorld: function() {
this.say("Hi my name is " + this.get('name'));
}
});
tom.helloWorld() // alerts "Hi my name is Tom Dale"
由于Ember支持绑定和观察者,因此你可以随时通过get方法访问属性,也可以通过set方法设置属性。
当创建一个对象的新的实例时,也可以覆写类中定义的任何属性和方法。在本例中,作为例子,你可以覆写从Person
类继承的say
方法。
var yehuda = Person.create({
name: "Yehuda Katz",
say: function(thing) {
var name = this.get('name');
this._super(name + " says: " + thin