Edited at

Marionette.jsまとめ その2 View, ItemView, CollectionView

More than 5 years have passed since last update.

Marionette.jsまとめ その1 Application, Controller, AppRouter

Marionette.jsまとめ その2 View, ItemView, CollectionView

Marionette.jsまとめ その3 CompositeView, Layout, Region


Marionette.View

Backbone.Viewを拡張したオブジェクトで、

他のMarionette.*Viewの基底クラスとなっています。

ここでは共通の処理やメソッドを定義しています。


bindUIElements

uiに指定したセレクタに沿って

jQueryオブジェクトをキャッシュします。

var FooView = Marionette.View.extend({

el: 'body',
ui: {
fooButton: '#fooButton',
listItems: 'li.bar'
},
initialize: function() {
this.bindUIElements();
}
});

var fooView = new FooView();
fooView.ui.fooButton;
// => $('#button')


modelEvents, collectionEvents

listenToを使用してModel, Collectionのイベントの監視を行います。

通常のevents同様undelegateEventsで解除する事ができます。

var FooView = Marionette.View.extend({

modelEvents: {
change: 'render'
},
collectionEvents: {
add: 'render'
}
});


triggers

eventsと似たような形で定義しますが

メソッドを呼び出すのではなく指定したイベントを発火させます。

DOMイベントのハンドラ内でpreventDefaultstopPropagationを実行したい場合は

引数にオプションを渡して設定します。

var FooView = Marionette.View.extend({

triggers: {
'click #foo': 'foo:bar',
'blur .bar': {
event: 'foobar:baz:qux',
preventDefault: true,
stopPropagation: true
}
}
});


templateHelpers

テンプレート内で使用できるヘルパー関数を定義します。

デフォルトのテンプレートエンジンとしてUnderscore.jsの_.templateが設定されていますが、

テンプレートの読み込み・コンパイルを行っているメソッドをオーバーライドすることで

Handlebarsなど他のテンプレートエンジンを使用することが可能です。

var FooView = Marionette.View.extend({

templateHelpers: {
getDate: function() {
return Date.now();
}
}
});


close

Viewのclose処理を行います。



  • uiバインディングの解除


  • listenToの解除


  • before:close,closeイベントの発火

  • DOMの破棄

view.close();


Marionette.ItemView

単体のアイテム(model, collection)と結びつくViewです。


template

Viewが使用するテンプレートをセレクタで指定します。

var FooItemView = Marionette.ItemView.extend({

template: '#itemTemplate'
});

<section id="foo"></section>

<script type="text/html" id="itemTemplate">
<div><%- name %></div>
</script>


render

renderは既に定義済みであり、 新たに書く必要はありません。

関連づけたModelまたはCollectionのデータを

テンプレートに渡してレンダリングしたDOMをelに挿入します。


レンダリング

var fooItemView = new FooItemView({

el: '#foo',
model: new Backbone.Model({
name: 'bar'
})
});
fooItemView.render();


結果

<section id="foo">

<div>bar</div>
</section>


Marionette.CollectionView

Collectionと関連づけられ、

Marionette.ItemViewの集合となるViewです。


itemView

対応するItemViewを設定します。

var FooItemView = Marionette.ItemView.extend({

template: '#itemTemplate'
});
var FooCollectionView = Marionette.CollectionView.extend({
el: '#fooList',
itemView: FooItemView
});

<ul id="fooList"></ul>

<script type="text/html" id="itemTemplate">
<li><%- name %></li>
</script>


render


レンダリング

var fooCollectionView = new FooCollectionView({

collection: new Backbone.Collection([
{name: 'foo'},
{name: 'bar'},
{name: 'baz'}
])
});
// renderは定義済み
fooCollectionView.render();


結果

<ul id="fooList">

<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>