Javascript MVC框架Backbone.js详解(3)
首先，新定义一个Router类。 复制代码 代码如下: Router = Backbone.Router.extend({ routes: { } }); routes属性 Backbone.Router对象中，最重要的就是routes属性。它用来设置
首先，新定义一个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/"})
Backbone.Model
Model代表单个的对象实体。
复制代码 代码如下:
var User = Backbone.Model.extend({
defaults: {
name: '',
email: ''
}
});
var user = new User();
上面代码使用extend方法，生成了一个User类，它代表model的模板。然后，使用new命令，生成一个Model的实例。defaults属性用来设置默认属性，上面代码表示user对象默认有name和email两个属性，它们的值都等于空字符串。
精彩图集
精彩文章