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

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イベントのハンドラ内でpreventDefaultやstopPropagationを実行したい場合は
引数にオプションを渡して設定します。

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>