勉強会JS編＜7＞ yeoman + backbone.router #JavaScript

Backbone.Routerとは

ブラウザのハッシュとそれに対応するコールバック関数をマッピング
ViewがDOMイベントを監視し対応するメソッドを実行するのに対してRouterはブラウザのハッシュを監視し対応するメソッドを実行する。

実習

オブジェクトの定義

yeomanでBackbone.Routerの雛形を生成する。

  [devnote@hooni:~/documents/study/js/sample] % yo backbone:router contact
     create app/scripts/routes/contact.js
     create test/routers/contact.spec.js

生成されたルータを下記のように修正する。

  // app/scripts/routers/contact.js
  /*global Sample, Backbone*/

  Sample.Routers = Sample.Routers || {};

  (function () {
    'use strict';

    Sample.Routers.Contact = Backbone.Router.extend({

      initialize: function() {
        console.log('Routerを初期化されました。');
      },

      // http://example.com/#state1
      // http://example.com/#state2
      routes: {
        'state1': 'state1',
        'state2': 'state2',
        'contacts/:id': 'showContact'
      },

      showContact: function(id) {
        console.log(id);
      },

      // http://example.com/#state1
      // アクセスした場合に呼び出される
      state1: function() {
        console.log('state1');
      },

      // http://example.com/#state2
      // アクセスした場合に呼び出される
      state2: function() {
        console.log('state2');
      }

    });

  })();

  // app/scripts/main.js
  ...snip...

  routes_ex01: function() {
    // ルートの初期化
    var router = new Sample.Routers.Contact();

    // Backbone.historyの初期化
    Backbone.history.start();
  }

  ...snip...

  $(document).ready(function () {
    'use strict';
    var c = Sample.init();
    Sample.routes_ex01();
  });

routes
- ブラウザのハッシュとメソッドを紐付ける。
Backbone.history
- hashchangeイベントによる状態遷移の履歴を取り扱う。
- Backbone.Routerで定義したルーツに紐づけられたメソッドを呼び出す。
- Backbone.historyの初期化が済んでいないとBackbone.Routerに定義したルーティングが機能しない。

参考書籍

JavaScriptエンジニア養成読本

勉強会JS編＜7＞ yeoman + backbone.router

関連記事

Backbone.Routerとは

実習

オブジェクトの定義

参考書籍