marionette.png
Marionette中的基本概念
这篇文档中囊括了Marionette中的基本用法和概念。包括：约定叫法、设置属性、基本的选项等。
类继承 Class-based Inheritance
Backbone和Marionette用 _.extend 函数实现了模拟的类继承。所有的东西都是类构成的，例如 Marionette.View , Marionette.Object 以及所有基于它们扩展的东西，
都由一个叫做 extend 的方法提供。
在下面的示例中，我们创建了一个伪类叫做 MyView :
var Mn = require('backbone.marionette');
var MyView = Mn.View.extend({});
现在你可以使用JavaScript中的new关键字创建 MyView 的实例:
var view = new MyView();
值属性 Value Attributes
当我们扩展了一个类，我们可以在 extend 方法传入的对象中定义一些特殊的值来作为类的属性。
var Mn = require('backbone.marionette');
var MyView = Mn.View.extend({
className: 'bg-success',
template: '#template-identifier',
regions: {
myRegion: '.my-region'
},
modelEvents: {
change: 'removeBackground'
},
removeBackground: function() {
this.$el.removeClass('bg-success');
}
});
在线示例
当我们实例化了MyView后，每一个实例将会被赋予一个在.my-region元素上创建的带有.bg-success类样式的myRegion区域。
带返回值的函数 Functions Returning Values
在几乎每一个我们可以赋值的实例中，我们也可以实时地指定一个函数计算出这个值。在这种情况下，Marionette会在实例化时运行这个函数并使用返回的值：
var Mn = require('backbone.marionette');
var MyView = Mn.View.extend({
className: function() {
return this.model.successful() ? 'bg-success' : 'bg-error';
},
template: '#template-identifier',
regions: function() {
return {
myRegion: '.my-region'
};
},
modelEvents: function() {
var wasSuccessful = this.model.successful();
return {
change: wasSuccessful ? 'removeBackground' : 'alert'
};
},
removeBackground: function() {
this.$el.removeClass('bg-success');
},
alert: function() {
console.log('model changed');
}
});
正如所见，几乎所有的属性都会动态地实现。在大多数情况下，Marionette将在实例化，或在第一次渲染时，调用一次该函数，并将此值保存在该View的整个生命周期中。这个规则还有一些例外的情况，不过这些还要参照它们各自的文档。
函数上下文 Function Context
当使用函数设置属性时，Marionette会指定该实体为你新建的类的this。你可以使用这个特性来确保你能正确地访问到你所想要访问的对象。例如，templateContext的值或结果是绑定在它的数据对象上面的，所以使用函数是可以直接访问到这个view的上下文的唯一方式。
实例化时确定属性 Binding Attributes on Instantiation
在Marionette中，除了可以在定义class的时候设置属性之外，大多数属性还可以在实例化时被确定。你可以使用这个方式实时地绑定事件（events），触发器（triggers），模型（models）以及集合（collections）：
var Mn = require('backbone.marionette');
var MyView = Mn.View.extend({
template: '#template-identifier'
});
var myView = new MyView({
triggers: {
'click a': 'show:link'
}
});
上面的代码设置了一个叫做show:link的触发器，这个触发器会在用户点击该view内的<a>标签时被触发。
在这里设置的选项将会覆盖原先在class中定义的选项。举个例子：
var Mn = require('backbone.marionette');
var MyView = Mn.View.extend({
template: '#template-identifier',
triggers: {
'click @ui.save': 'save:form'
}
});
var myView = new MyView({
triggers: {
'click a': 'show:link'
}
});
在这个例子中，save:form的触发器将不会被触发，因为show:link的触发器将它完全地覆盖了。
设置选项 Setting Options
当你实例化一个类时，Marionette可以设置选项。这可以让你根据需要覆盖许多基类的属性。You can also pass new information specific to the object in question that it can access through special helper methods.
var Mn = require('backbone.marionette');
var MyView = Mn.View.extend({
checkOption: function() {
console.log(this.getOption('foo'));
}
});
var view = new MyView({
foo: 'some text'
});
view.checkOption(); // prints 'some text'
getOption方法
想要访问一个选项，我们使用getOption方法。如果在options中没有定义，getOption会追溯相同名字的实例中定义的值。
var Mn = require('backbone.marionette');
var MyView = Mn.View.extend({
className: function() {
var defaultClass = this.getOption('defaultClass');
var extraClasses = this.getOption('extraClasses');
return [defaultClass, extraClasses].join(' ');
},
defaultClass: 'table'
});
var myView = new MyView({
model: new MyModel(),
extraClasses: 'table-striped'
});
mergeOptions方法
mergeOptions方法接受两个参数：一个options对象和options对象中的key。任何匹配的key将会被合并到类的实例中。例如：
var Bb = require('backbone');
var Mn = require('backbone.marionette');
var MyObject = Mn.Object.extend({
initialize: function(options) {
this.mergeOptions(options, ['model', 'something']);
// this.model and this.something will now be available
}
});
var myObject = new MyObject({
model: new Backbone.Model(),
something: 'test',
another: 'value'
});
console.log(myObject.model);
console.log(myObject.something);
console.log(myObject.getOption('another'));
在上面的例子中，model和something在MyObject实例中是可用的，同时另一个必须通过getOption才能访问。这在你想要在已经定义好的类中大量加入额外的key时是非常好用的。
网友评论