Marionette.jsはViewにおいてコードの冗長性をなくしてくれる
Marionette.ItemViewによる削除
var MyView = Backbone.View.extend({
template: $('#my-view-template').html(),
render: function(){
// Underscore.jsのテンプレートをコンパイル
var compiledTemplate = _.template(this.template);
// モデルデータを使いテンプレートに描画する
var data = this.model.toJSON();
var html = compiledTemplate(data);
// 描画されたHTMLをビューに埋め込む
this.$el.html(html);
}
});
// ビューのインスタンスを生成して、モデルデータを渡す
var Cat = new Person({
Name: 'Cat',
email: 'cat@example.com'
});
var myView = new MyView({
model: Cat
});
myView.render();
$('#content').html(myView.el);
Marionette.jsを使うと上のようなViewの定義を以下のように定義できる
var MyView = Marionette.ItemView.extend({
template: '#my-view-template'
});
リージョン管理を使ってDOMの要素のなかのビューを綺麗に管理
var Cat = new Person({
Name: 'Cat',
email: 'cat@example.com'
});
var myView = new MyView({
model: Cat
});
myView.render();
// ビューをDOM上に表示
$('#content').html(myView.el);
上記の定義をMarionette.Regionを使用して記述
var myRegion = new Marionette.Region({
el: '#content'
});
// リージョン内のビューを表示
var myView = new MyView({
model: Cat
});
myRegion.new(myView)