Help us understand the problem. What is going on with this article?

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

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.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

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

App.main.close();

App.main.currentView;
// => undefined;
結果
<section id="main"></section>

最後に

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

freee
スモールビジネスのバックオフィス業務をテクノロジーで自動化し、日本のスモールビジネスを元気にする
http://www.freee.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away