Router是Backbone提供的路由对象,用来将用户请求的网址与后端的处理函数一一对应。
首先,新定义一个Router类。
Router = Backbone.Router.extend({
routes: {
}
});
routes属性
Backbone.Router对象中,最重要的就是routes属性。它用来设置路径的处理方法。
routes属性是一个对象,它的每个成员就代表一个路径处理规则,键名为路径规则,键值为处理方法。
如果键名为空字符串,就代表根路径。
routes: {
'': 'phonesIndex',
},
phonesIndex: function () {
new PhonesIndexView({ el: 'section#main' });
}
星号代表任意路径,可以设置路径参数,捕获具体的路径值。
var AppRouter = Backbone.Router.extend({
routes: {
"*actions": "defaultRoute"
}
});
var app_router = new AppRouter;
app_router.on('route:defaultRoute', function(actions) {
console.log(actions);
})
上面代码中,根路径后面的参数,都会被捕获,传入回调函数。
路径规则的写法。
var myrouter = Backbone.Router.extend({
routes: {
"help": "help",
"search/:query": "search"
},
help: function() {
...
},
search: function(query) {
...
}
});
routes: {
"help/:page": "help",
"download/*path": "download",
"folder/:name": "openFolder",
"folder/:name-:mode": "openFolder"
}
router.on("route:help", function(page) {
...
});
Backbone.history
设置了router以后,就可以启动应用程序。Backbone.history对象用来监控url的变化。
App = new Router();
$(document).ready(function () {
Backbone.history.start({ pushState: true });
});
打开pushState方法。如果应用程序不在根目录,就需要指定根目录。
Backbone.history.start({pushState: true, root: "/public/search/"})