创建路由器

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 条路线。