创建路由器
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 条路线。