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

Marionette.jsまとめその1 Application, Controller, AppRouter
Marionette.jsまとめその2 View, ItemView, CollectionView
Marionette.jsまとめその3 CompositeView, Layout, Region

Marionette.CompositeView

Marionette.CollectionViewを拡張したオブジェクトです。
CollectionViewと違い、テンプレートを設定する事ができます。

itemViewContainer

itemViewのコンテナとなる要素をjQueryセレクタで指定します。

var FooItemView = Marionette.ItemView.extend({
    template: '#itemTemplate'
});
var FooCompositeView = Marionette.CompositeView.extend({
    el: '#main',
    itemView: FooItemView,
    itemViewContainer: '#fooList',
    template: '#listTemplate'
});

<section id="main"></section>

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

<script type="text/html" id="listTemplate">
    <h1>Item List</h1>
    <ul id="fooList"></ul>
</script>

render

レンダリング

var compositeView = new FooCompositeView({
    collection: new Backbone.Collection([
        {name: 'foo'},
        {name: 'bar'},
        {name: 'baz'}
    ])
});
compositeView.render();

結果

<section id="main">
    <h1>Item List</h1>
    <ul id="fooList">
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>
</section>

Marionette.Layout

Marionette.ItemViewを拡張したオブジェクトです。
MarionetteApplication同様にRegionを配下に持つ事ができます。

regions, addRegions

Regionを定義・追加します。

var FooLayout = Marionette.Layout.extend({
    template: '#layoutTemplate',
    regions: {
        'foo': '#foo',
        'bar': '#bar'
    }
});
var fooLayout = new FooLayout();

fooLayout.addRegions({
    'baz': '#baz'
});

Marionette.Region

DOMとそれに関連するViewを管理するオブジェクトです。
主にMarionette.Application,Marionette.Layoutのインスタンスの子要素として
定義されます。

var App = new Marionette.Application();

App.addRegions({
    'main': '#main'
});

show

引数として渡されたViewインスタンスのrenderを呼び、
生成物を自身のel内に表示します。
el内に既にDOMがあった場合は置き換えられます。
表示中のViewインスタンスはcurrentViewとして保持されます。

App.module('View', function(View, App) {
    View.FooItem = Marionette.ItemView.extend({
        tagName:  'div',
        template: '#itemTemplate'
    });
});

App.addInitializer(function() {
    App.main.show(new App.View.FooItem({
        model: new Backbone.Model({name: 'foo'})
    }));
});

<section id="main"></section>

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

App.start();

結果

<section id="main">
    <div>
        <p>foo</p>
    </div>
</section>

close

currentViewのcloseメソッドを呼び出しと
インスタンスへの参照の削除を行います。

App.main.close();

App.main.currentView;
// => undefined;

結果

<section id="main"></section>

最後に

まとめは以上となります。
ここで列挙したのは一部の機能だけなので、より詳細な情報は公式ドキュメント、
実際にMarionette.jsを使用して作られたアプリケーションはTodoMVCなどが参考になるかと思います。
間違いなどありましたらコメント欄でご指摘いただけると嬉しいです。

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