Backbone.jsのRouterを復習

https://app.codegrid.net/entry/backbone-router-history

by FiNGAHOLiC

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<h1>サンプル1</h1>
<ul class="menu1">
    <li><a href="#page/1">page/1</a></li>
    <li><a href="#page/2">page/2</a></li>
</ul>

<h1>サンプル2</h1>
<ul class="menu2">
    <li><a href="page/1">page/1</a></li>
    <li><a href="page/2">page/2</a></li>
</ul>

<h1>サンプル3</h1>
<ul class="menu3">
    <li><a href="page/foo/1">page/foo/1</a></li>
    <li><a href="page/foo/2">page/foo/2</a></li>
</ul>

JavaScript

// Backbone.historyはページ内で1つしか使えないのでコメントアウトしている

// サンプル1
/*
(function(){
    var Router = Backbone.Router.extend({
        routes: {
            'page/1': 'page1',
            'page/2': 'page2'
        },
        page1: function(){
            console.log('page1');
        },
        page2: function(){
            console.log('page2');
        }
    });
    var router = new Router();
    Backbone.history.start({
        root: '/FiNGAHOLiC/5jTru/show/'
    });
}());
*/

// サンプル2
/*
(function(){
    var Router = Backbone.Router.extend({
        routes: {
            'page/1': 'page1',
            'page/2': 'page2'
        },
        page1: function(){
            console.log('page1');
        },
        page2: function(){
            console.log('page1');
        }
    });
    var router = new Router();
    Backbone.history.start({
        pushState: true,
        root: '/FiNGAHOLiC/5jTru/show/'
    });
    var $menu = $('.menu2').find('a');
    $menu.on('click', function(e){
        e.preventDefault();
        router.navigate($(this).attr('href'), {
            trigger: true
        });
    });
}());
*/

// サンプル3
(function(){
    var Router = Backbone.Router.extend({
        routes: {
            'page/:query/:id': 'page'
        },
        page: function(query, id){
            console.log(query, id);
        }
    });
    var router = new Router();
    Backbone.history.start({
        pushState: true
    });
    var $menu = $('.menu3').find('a');
    $menu.on('click', function(e){
        e.preventDefault();
        router.navigate($(this).attr('href'), {
            trigger: true
        });
    });
}());