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

[Marionette.jsまとめ その1 Application, Controller, AppRouter](http://qiita.com/tohashi/items/6fdb16367e39afa41d8c)
[Marionette.jsまとめ その2 View, ItemView, CollectionView](http://qiita.com/tohashi/items/85475b2dbbea164179e5)
[Marionette.jsまとめ その3 CompositeView, Layout, Region](http://qiita.com/tohashi/items/b5d1bac3f32d324527ce)

## Marionette.View

`Backbone.View`を拡張したオブジェクトで、
他の`Marionette.*View`の基底クラスとなっています。
ここでは共通の処理やメソッドを定義しています。

#### bindUIElements

`ui`に指定したセレクタに沿って
jQueryオブジェクトをキャッシュします。

```js
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`で解除する事ができます。

```js
var FooView = Marionette.View.extend({
    modelEvents: {
        change: 'render'
    },
    collectionEvents: {
        add: 'render'
    }
});
```

#### triggers

`events`と似たような形で定義しますが
メソッドを呼び出すのではなく指定したイベントを発火させます。
DOMイベントのハンドラ内で`preventDefault`や`stopPropagation`を実行したい場合は
引数にオプションを渡して設定します。

```js
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など他のテンプレートエンジンを使用することが可能です。

```js
var FooView = Marionette.View.extend({
    templateHelpers: {
        getDate: function() {
            return Date.now();
        }
    }
});
```

#### close

Viewのclose処理を行います。

- `ui`バインディングの解除
- `listenTo`の解除
- `before:close`,`close`イベントの発火
- DOMの破棄

```js
view.close();
```

## Marionette.ItemView

単体のアイテム(model, collection)と結びつくViewです。

#### template

Viewが使用するテンプレートをセレクタで指定します。

```js
var FooItemView = Marionette.ItemView.extend({
    template: '#itemTemplate'
});
```

```html
<section id="foo"></section>

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

#### render

renderは既に定義済みであり、 新たに書く必要はありません。
関連づけたModelまたはCollectionのデータを
テンプレートに渡してレンダリングしたDOMを`el`に挿入します。

```js:レンダリング
var fooItemView = new FooItemView({
    el: '#foo',
    model: new Backbone.Model({
        name: 'bar'
    })
});
fooItemView.render();
```

```html:結果
<section id="foo">
    <div>bar</div>
</section>
```

## Marionette.CollectionView

Collectionと関連づけられ、
`Marionette.ItemView`の集合となるViewです。

#### itemView

対応するItemViewを設定します。

```js
var FooItemView = Marionette.ItemView.extend({
    template: '#itemTemplate'
});
var FooCollectionView = Marionette.CollectionView.extend({
    el: '#fooList',
    itemView: FooItemView
});
```

```html
<ul id="fooList"></ul>

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

#### render

```js:レンダリング
var fooCollectionView = new FooCollectionView({
    collection: new Backbone.Collection([
        {name: 'foo'},
        {name: 'bar'},
        {name: 'baz'}
    ])
});
// renderは定義済み
fooCollectionView.render();
```

```html:結果
<ul id="fooList">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ul>
```