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

関連記事

• 勉強会JS編＜1＞ オブジェクト指向言語としてのJavaScriptを理解
• 勉強会JS編＜2＞ クライアントサイドMVCフレームワーク
• 勉強会JS編＜3＞ フロントエンド開発環境構築
• 勉強会JS編＜4＞ yeoman + backbone.model + grunt
• 勉強会JS編＜5＞ yeoman + backbone.collection + backbone.localStorage
• 勉強会JS編＜6＞ yeoman + backbone.view
• 勉強会JS編＜7＞ yeoman + backbone.router
• 勉強会JS編＜8＞ yeoman + backbone.js 実践 - その１
• 勉強会JS編＜9＞ yeoman + backbone.js 実践 - その２

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エンジニア養成読本