Javascript MVC框架Backbone.js详解(3)


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两个属性,它们的值都等于空字符串。

生成实例时,可以提供各个属性的具体值。

复制代码 代码如下:


var user = new User ({
    id: 1,
    name: 'name',
    email: 'name@email.com'
});


上面代码在生成实例时,提供了各个属性的具体值。

idAttribute属性

Model实例必须有一个属性,作为区分其他实例的主键。这个属性的名称,由idAttribute属性设定,一般是设为id。

复制代码 代码如下:


var Music = Backbone.Model.extend({
    idAttribute: 'id'
});

get方法

get方法用于返回Model实例的某个属性的值。

复制代码 代码如下:


var user = new User({ name: "name", age: 24});
var age = user.get("age"); // 24
var name = user.get("name"); // "name"

set方法

set方法用于设置Model实例的某个属性的值。

复制代码 代码如下:


var User = Backbone.Model.extend({
    buy: function(newCarsName){
        this.set({car: newCarsName });
    }
});
var user = new User({name: 'BMW',model:'i8',type:'car'});
user.buy('Porsche');
var car = user.get("car"); // ‘Porsche'

on方法

on方法用于监听对象的变化。

复制代码 代码如下:


var user = new User({name: 'BMW',model:'i8'});
user.on("change:name", function(model){
    var name = model.get("name"); // "Porsche"
    console.log("Changed my car's name to " + name);
});
user.set({name: 'Porsche'});
// Changed my car's name to Porsche


上面代码中的on方法用于监听事件,“change:name”表示name属性发生变化。

urlroot属性

该属性用于指定服务器端对model进行操作的路径。

复制代码 代码如下:


var User = Backbone.Model.extend({
    urlRoot: '/user'
});

上面代码指定,服务器对应该Model的路径为/user。

fetch事件

fetch事件用于从服务器取出Model。

复制代码 代码如下:


var user = new User ({id: 1});
user.fetch({
    success: function (user){
        console.log(user.toJSON());
    }
})


上面代码中,user实例含有id属性(值为1),fetch方法使用HTTP动词GET,向网址“/user/1”发出请求,从服务器取出该实例。

save方法

save方法用于通知服务器新建或更新Model。

如果一个Model实例不含有id属性,则save方法将使用POST方法新建该实例。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgsfjd.html