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

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

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

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

  • CollectionView, ItemViewなどViewタイプの追加
  • RegionLayoutによる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

listenToonを使ってオブザーバを設定することができます。
また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, closeBackbone.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()
    });
});
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