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


var User = Backbone.Model.extend({
    urlRoot: '/user'
});
var user = new User ();
var userDetails = {
    name: 'name',
    email: 'name@email.com'
};
user.save(userDetails, {
    success: function (user) {
        console.log(user.toJSON());
    }
})


上面代码先在类中指定Model对应的网址是/user,然后新建一个实例,最后调用save方法。它有两个参数,第一个是实例对象的具体属性,第二个参数是一个回调函数对象,设定success事件(保存成功)的回调函数。具体来说,save方法会向/user发出一个POST请求,并将{name: ‘name', email: ‘name@email.com'}作为数据提供。

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

复制代码 代码如下:


var user = new User ({
    id: 1,
    name: '张三',
    email: 'name@email.com'
});
user.save({name: '李四'}, {
    success: function (model) {
        console.log(user.toJSON());
    }
});


上面代码中,对象实例含有id属性(值为1),save将使用PUT方法向网址“/user/1”发出请求,从而更新该实例。

destroy方法

destroy方法用于在服务器上删除该实例。

复制代码 代码如下:


var user = new User ({
    id: 1,
    name: 'name',
    email: 'name@email.com'
});
user.destroy({
    success: function () {
       console.log('Destroyed');
    }
});


上面代码的destroy方法,将使用HTTP动词DELETE,向网址“/user/1”发出请求,删除对应的Model实例。

Backbone.Collection

Collection是同一类Model的集合,比如Model是动物,Collection就是动物园;Model是单个的人,Collection就是一家公司。

复制代码 代码如下:


var Song = Backbone.Model.extend({});
var Album = Backbone.Collection.extend({
    model: Song
});


上面代码中,Song是Model,Album是Collection,而且Album有一个model属性等于Song,因此表明Album是Song的集合。

add方法,remove方法

Model的实例可以直接放入Collection的实例,也可以用add方法添加。

复制代码 代码如下:


var song1 = new Song({ id: 1 ,name: "歌名1", artist: "张三" });
var song2 = new Music ({id: 2,name: "歌名2", artist: "李四" });
var myAlbum = new Album([song1, song2]);
var song3 = new Music({ id: 3, name: "歌名3",artist:"赵五" });
myAlbum.add(song3);


remove方法用于从Collection实例中移除一个Model实例。

复制代码 代码如下:


myAlbum.remove(1);


上面代码表明,remove方法的参数是model实例的id属性。

get方法,set方法

get方法用于从Collection中获取指定id的Model实例。

复制代码 代码如下:


myAlbum.get(2))

fetch方法

fetch方法用于从服务器取出Collection数据。

复制代码 代码如下:


var songs = new Backbone.Collection;
songs.url = '/songs';
songs.fetch();


Backbone.events

复制代码 代码如下:


var obj = {};
_.extend(obj, Backbone.Events);
obj.on("show-message", function(msg) {
    $('#display').text(msg);
});
obj.trigger("show-message", "Hello World");

您可能感兴趣的文章:

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

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