第四章 Backbonejs中的Router實踐 · Backbone.js入門教程第二版

前面介紹了Model和Collection，基本上屬于程序中靜態的數據部分。這一節介紹Backbone中的router，屬于動態的部分，見名知意，router——路由的意思，顯然是能夠控制url指向哪個函數的。具體是怎么做的一會通過幾個實例來看看。在現在的單頁應用中，所有的操作、內容都在一個頁面上呈現，這意味著瀏覽器的url始終要定位到當前頁面。那么一個頁面中的所有的操作總不能都通過事件監聽來完成，尤其是對于需要切換頁面的場景以及需要分享、收藏固定鏈接的情況。因此就有了router，通過hash的方式（即#page）來完成。不過隨著瀏覽器發展，大多數的瀏覽器已經可以通過history api來操控url的改變，可以直接使用 /page 來完成之前需要hash來完成的操作，這種方式看起來更為直觀一些。下面提供過幾個demo來切實體會一番。 ## 4.1 一個簡單的例子 ~~~ var AppRouter = Backbone.Router.extend({ routes: { "*actions" : "defaultRoute" }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start(); ~~~ 需要通過調用Backbone.history.start()方法來初始化這個Router。在頁面上需要有這樣的a標簽： ~~~ <a href="#actions">testActions</a> ~~~ 點擊該鏈接時，便會觸發defaultRouter這個方法。 ## 4.2 這個routes映射要怎么傳參數看下面例子，立馬你就知道了 ~~~ var AppRouter = Backbone.Router.extend({ routes: { "posts/:id" : "getPost", "*actions" : "defaultRoute" }, getPost: function(id) { alert(id); }, defaultRoute : function(actions){ alert(actions); } }); var app_router = new AppRouter; Backbone.history.start(); ~~~ 對應的頁面上應該有一個超鏈接： ~~~ <a href="#/posts/120">Post 120</a> ~~~ 從上面已經可以看到匹配#標簽之后內容的方法，有兩種：一種是用“:”來把#后面的對應的位置作為參數；還有一種是“*”，它可以匹配所有的url，下面再來演練一下。 ~~~ var AppRouter = Backbone.Router.extend({ routes: { "posts/:id" : "getPost", //下面對應的鏈接為<a href="#/download/user/images/hey.gif">download gif</a> "download/*path": "downloadFile", //下面對應的鏈接為<a href="#/dashboard/graph">Load Route/Action View</a> ":route/:action": "loadView", "*actions" : "defaultRoute" }, getPost: function(id) { alert(id); }, defaultRoute : function(actions){ alert(actions); }, downloadFile: function( path ){ alert(path); // user/images/hey.gif }, loadView: function( route, action ){ alert(route + "_" + action); // dashboard_graph } }); var app_router = new AppRouter; Backbone.history.start(); ~~~ ## 4.3 手動觸發router 上面的例子都是通過頁面點擊觸發router到對應的方法上，在實際的使用中，還存在一種場景就是需要在某一個邏輯中觸發某一個事件，就像是jQuery中得trigger一樣，下面的代碼展示怎么手動觸發router。 ~~~ routes: { "posts/:id" : "getPost", "manual": "manual", "*actions": "defaultRoute", }, // 省略部分代碼 loadView: function( route, action ){ alert(route + "_" + action); // dashboard_graph }, manual: function() { alert("call manual"); app_router.navigate("/posts/" + 404, {trigger: true, replace: true}); } ~~~ 對應著在頁面添加一個a標簽：?`<a href="#/manual">manual</a>`?然后點擊這個鏈接，便會觸發posts/:id對應的方法。這里需要解釋的是navigate后面的兩個參數。trigger表示觸發事件，如果為false，則只是url變化，并不會觸發事件，replace表示url替換，而不是前進到這個url，意味著啟用該參數，瀏覽器的history不會記錄這個變動。完整代碼依然在?`code`?中可以找到。