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

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