建立路由器
Web 伺服器根據瀏覽器傳送的請求為使用者提供服務,但是使用者如何告訴瀏覽器他/她正在尋找什麼,就在我們需要 URL 的時候。網際網路上的每個網頁都有一個 URL,可以加入書籤,複製,共享和儲存,以備將來參考。在單頁 Backbone 應用程式中,我們看到的所有內容都是檢視,檢視已形成並呈現以顯示特定頁面,但如果使用者希望再次檢視相同資訊該怎麼辦。為此,我們需要實現基於 Backbone 路由器的應用程式,該應用程式將根據路由名稱和引數呈現檢視。
一個非常簡單的 Backbone 路由器示例:
var UserList = Backbone.Router.extend({
routes: {//List of URL routes with the corresponding function name which will get called when user will visit a page having URL containing this route
"list": "list", // localhost:8080/#list
"search/:name": "search", // localhost:8080/#search/saurav
"search/:name/p:page": "search", // localhost:8080/#search/kiwis/p7
"profile/:userId": "profile" // localhost:8080/#profile/92
},
list: function() {
var userCollection = new UserCollection();
var userCollectionView = new UserCollectionView();
userCollection.fetch({remove : true, data:{}, success: function(){
for(var i = 0; i < userCollection.length; i++ ){
var userModel = userCollection.at(i);
var userView = new UserView({ model: userModel });
userView.render();
userCollectionView.$el.append(userView.$el);
}
}});
},
search: function(name, page) {
var userCollection = new UserCollection();
var userCollectionView = new UserCollectionView();
userCollection.fetch({remove : true, data:{pageNo: page, name: name}, success: function(){
for(var i = 0; i < userCollection.length; i++ ){
var userModel = userCollection.at(i);
var userView = new UserView({ model: userModel });
userView.render();
userCollectionView.$el.append(userView.$el);
}
}});
},
profile: function(userId){
var userModel = new UserModel({id: userId});
userModel.fetch({success: function(){
var userView = new UserView({model: userModel});
userView.render();
}});
}
});
var userList = new UserList();
Backbone.history.start();
上面的程式碼只是一個示例程式碼,演示瞭如何建立 Backbone 路由器並從 URL 獲取引數以呈現相應的檢視。
解釋上述路由器的工作方式和行為:
網址案例:
-
localhost:8080 / #search / saurav - 路由器的搜尋路由(函式)將被引數 name =
saurav
和 page = null 觸發,現在userCollection.fetch()
函式將獲取名稱=saurav
的所有使用者從後端開始,它將逐個呈現每個使用者的詳細資訊。 -
localhost:8080 / #search / saurav / p6 - 路由器的搜尋路由(函式)將通過引數 name =
saurav
和 page = 6 觸發,現在userCollection.fetch()
函式將獲取名稱=“的所有使用者來自後端的第 6 頁的 saurav,它將逐一呈現每個使用者的詳細資訊。 -
localhost:8080 / #list - 路由器的列表路由(功能)將被觸發,現在
userCollection.fetch()
函式將從後端獲取所有使用者,它將逐個呈現每個使用者的詳細資訊。 -
localhost:8080 / #profile / 92 - 路由器的
profile
路由(函式)將被觸發,我們將建立一個 id = userId 即 92 的 userModel 的新例項,我們將從後端獲取使用者的詳細資訊並使用該方法呈現 userView 資料。
一個易於實驗的例子:
訪問 Chrome 瀏覽器中的 http://backbonejs.org ,開啟開發人員工具控制檯並貼上以下程式碼 -
var Workspace = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
help: function() {
console.log("help");
},
search: function(query, page) {
console.log("searched " + query + " " + page);
}
});
var work = new Workspace();
Backbone.history.start();
現在,用“ http://backbonejs.org/#search/kiwis/p9 ” 替換瀏覽器中的 URL 並按 Enter 鍵。這將使用引數 query =kiwis
和 page = 9 觸發搜尋路徑(函式),你將在瀏覽器控制檯中看到輸出,即“搜尋到的 kiwis 9”。
通過程式碼更改路線:
-
案例 1 :在控制檯中執行程式碼
work.navigate("search/kiwis/p7", {trigger: true});
,它將列印輸出“搜尋到的 kiwis 7”,但如果你嘗試使用相同的引數執行相同的程式碼,則不會發生任何事情,請參閱下一個案例。 -
案例 2 :在控制檯中執行程式碼
work.navigate("search/kiwis/p7", {trigger: false});
,它不會列印任何東西,因為路由不會被觸發。 -
情況 3 :如果你需要再次重新載入當前路線,則需要執行此程式碼
Backbone.history.loadUrl("search/kiwis/p7");
。 -
案例 4 :執行程式碼
work.navigate("search/kiwis/p15");
只會更改 URL,但不會觸發相應的路徑(功能)。 -
情況 5 :執行程式碼
work.navigate("search/kiwis/p11", {trigger: true});
將更改 URL 並觸發路由。 -
案例 6 :執行程式碼
work.navigate("search/kiwis/p17", {trigger: true, replace: true})
將用這條路線替換現有路線,因此單擊瀏覽器的後退按鈕將帶你返回“search / kiwis / p15”的 2 條路線。