Marionette.jsまとめ その1 Application, Controller, AppRouter

[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.jsとは

[Marionette.js](http://marionettejs.com/)はBackbone.jsに下記等の機能を追加するライブラリです。

- `CollectionView`, `ItemView`などViewタイプの追加
- `Region`と`Layout`によるDOMの制御
- モジュール機構
- デストラクタ(elの削除、インスタンスの除去、オブザーバの解除)
- コントローラ

自分用に整理したいというのもあって
基本的な機能やAPIを数回に分けて列挙していきます。
使用しているMarionette.jsのバージョンは1.2.3です。

[公式ドキュメント](https://github.com/marionettejs/backbone.marionette/tree/master/docs)
[TodoMVC](http://todomvc.com/labs/architecture-examples/backbone_marionette/)

## Marionette.Application 

Marionette.jsアプリケーションの中核となるオブジェクトです。
このインスタンスをハブとして各オブジェクトを定義していきます。

```js
var App = new Marionette.Application();
```

#### addRegions

`Region`を追加します。
`Region`は関連するDOM内のレンダリングやViewの破棄などを管理するオブジェクトです。
`Application`や後述する`Layout`の子要素として定義します。

```js:Regionを追加
App.addRegions({
    'header': 'header',
    'main':   '#main',
    'footer': 'footer'
});

App.header;
// => Marionette.Regionのインスタンス
```

#### addInitializer

アプリケーション初期化時のコールバックを追加します。

```js
App.addInitializer(function() {
    var router = new App.Route.Router();
});
```

#### Events

`listenTo`や`on`を使ってオブザーバを設定することができます。
またMarionette.jsのイベントは全て`Marionette.triggerMethod`を介して行われ、
イベント発火時にそのオブジェクトに`on + イベント名`のメソッドが定義されていれば実行します。

```js
// どちらも初期化完了後に呼び出される
App.listenTo(App, 'initialize:after', function() {
    Backbone.History.start();
});

App.onInitializeAfter = function() {
    Backbone.History.start();
};
```

#### module

`Marionette.Application`のインスタンス配下にモジュールを定義します。

```javascript
App.module('Hoge', function(Hoge, App, Backbone, Marionette, $, _) {
    Hoge.Fuga = Backbone.View.extend({
        initialize: function() {
            console.log('Foo');
        }
    });
});
var fugaView = new App.Hoge.Fuga();

// サブモジュールまでまとめて定義可能
App.module('blur.blur.blur');
```

#### start

`Marionette.Application`の初期化処理を下記の順番で行います。

1. `initialize:before`イベント発火
2. addInitializerで登録した関数呼び出し、各モジュールの初期化処理
3. `initialize:after`イベント発火
4. `start`イベント発火

```js
$(function() {
    App.start();
});
```

## Marionette.Controller

Backbone.jsには無かったコントローラです。
特に固有の機能はなく、定義されているメソッドは
`triggerMethod`, `extend`, `close`と`Backbone.Events`関連です。


```js
var Controller = Marionette.Controller.extend({
    initialize: function() {
        this.todos = new App.Todo.Collection();
    },
    showLayouts: function() {
        App.main.show(new App.Layout.HeaderView);
    }
});
```

## Marionette.AppRouter

`Backbone.Router`を拡張したオブジェクトです。

#### appRoutes

ルーティングを設定します。
通常の`Backbone.Router`と違い、
呼び出すのは`controller`に指定したオブジェクトのメソッドです。

```javascript
var Router = Marionette.AppRouter.extend({
    appRoutes: {
        'top':    'hoge',
        '*splat': 'fuga'
    }
});

var Controller = Marionette.Controller.extend({
    hoge: function() {
        //...
    },
    fuga: function() {
        //...
    }
});

App.addInitializer(function() {
    router = new Router({
        controller: new Controller()
    });
});
```