Posted at

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などが参考になるかと思います。

間違いなどありましたらコメント欄でご指摘いただけると嬉しいです。