Backbonejs之router

上一篇Backbonejs之view，玩了一下backbone的view。这里在试一试backbone的router。
浏览器端的路由实现通常都是通过监听 hash tags(#)的变化来实现的。
backbone会把url中‘#’后面的字符串看待成路由，比如http://example.com/#/user/help，其中user/help就是一个路由。

直接上代码演示一下backbone的router的使用。

<!-- Backbone.js 依赖jquery和underscore -->
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="http://cdn.bootcss.com/underscore.js/1.8.0/underscore-min.js"></script>


<!-- 加载backbone -->
<script src="http://cdn.bootcss.com/backbone.js/1.2.3/backbone-min.js"></script>

<script src="http://cdn.bootcss.com/handlebars.js/4.0.0/handlebars.amd.js"></script>


<div class="search">

<!-- 利用hash tag添加路由 -->
<a href="#/posts/121">Example</a><br>
<a href="#/download/user/images/hey.gif">Download</a><br>
<a href="#/dashboard/graph">Load Route/Action View</a>

</div>

<script>
    var Router = Backbone.Router.extend({
        routes: {
            /**
              * 
              * :id这个写法的目的是，命名一个变量id, 用来保存路由字符串中对应位置的字符串。变量id会作为路由处理函数的参数传入。
              */

            "posts/:id": "getPost", // <a href="http://example.com/#/posts/121">Example</a>

            /**
              * 
              * *path这个写法类似上面。
              */

            "download/*path": "downloadFile", // <a href="http://example.com/#/download/user/images/hey.gif">Download</a>

            /**
              * 
              * 两个变量，能出入两个参数。
              */
            ":route/:action": "loadView", // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
        },

        getPost: function (id) {
            alert(id); // 121 
        }, 

        downloadFile: function (path) {
            alert(all); // user/images/hey.gif 
        }, 

        loadView: function (route, action) {
            alert(route + '-' + action) // // dashboard_graph 
    });

    var router = new Router();

    // 路由对应的逻辑函数可以写在router类的外面。类似事件监听。
    // router.on('route:getPost', function (id) {
    //     alert(id);
    // });
    // router.on('route:downloadFile', function (all) {
    //     alert(all);
    // });
    // router.on('route:loadView', function (route, action) {
    //    alert(route + "_" + action); // dashboard_graph
    //  } 
    Backbone.history.start();
</script>

下一篇玩一下backbone的model。