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

Marionette.jsまとめ その1 Application, Controller, AppRouter
Marionette.jsまとめ その2 View, ItemView, CollectionView
Marionette.jsまとめ その3 CompositeView, Layout, Region

Marionette.jsとは

Marionette.jsはBackbone.jsに下記等の機能を追加するライブラリです。

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

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

公式ドキュメント
TodoMVC

Marionette.Application

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

var App = new Marionette.Application();

addRegions

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

Regionを追加

App.addRegions({
    'header': 'header',
    'main':   '#main',
    'footer': 'footer'
});

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

addInitializer

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

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

Events

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

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

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

module

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

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イベント発火

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

Marionette.Controller

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

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に指定したオブジェクトのメソッドです。

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()
    });
});