建立路由器

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 條路線。