Backbone基础(四):RESTful持久化

无主题博客 » 前端开发 » Backbone » Backbone基础(四):RESTful持久化

对于大多数但页面应用程序,模型是驻留在服务器上的数据集。在数据访问方面,Backbone极大地简化了代码,通过在集合和模型上使用简单的API,来执行RESTful与服务器同步。

从服务器上获取模型

Collections.fetch()通过发送HTTP GET请求到URL上(集合的url属性或url函数),从服务器获取JSON数组形式的模型数据集。一旦数据接收,Backbone将执行set()函数来更新集合。

var MyModel = Backbone.Model.extend({
  defaults:{
    title:'',
    completed: false
  }
});

var MyCollection = Backbone.Collection.extend({
  model: MyModel,
  url: '/myapi'
});

var myCollection = new MyCollection();
todos.fetch(); //该方法调用后,将发送HTTP GET请求到 /myapi

保存模型到服务器

Backbone可以从服务器上一次性获取整个集合,但更新模型确实通过单独调用save()方法来实现的。当在服务器获取的模型上调用save()方法时,Backbone通过在集合的URL上附加一个id来构造一个新URL,然后发送HTTP PUT请求到服务器上。如果模型是在浏览器上创建的新实例(没有id),则HTTP POSt请求会发送到集合的URL上。COllections.create()可以用于创建一个新模型,并将其添加到集合里,然后通过一个单独的方法调用,再将其发送到服务器上。

var MyModel = Backbone.Model.extend({
  defaults: {
    title:'',
    completed:false
  }
});

var MyCollection = Backbone.Collection.extend({
  model:MyModel,
  url: '/myapi'
});

var myCollection = new MyCollection();
myCollection.fetch();

var myModel2 = myCollection.get(2);
myModel2.set('title','一个新的模型');
myModel2.save(); //该方法调用后,将发送一个HTTP PUT请求到 /myapi/2

myCollection.create({title:'创建一个模型'});
//发送一个HTTP POST请求到 /myapi,并创建一个集合

从服务器删除模型

可以通过调用destroy()方法从集合和服务器中删除一个存在的模型。与Collection.remove()不同,remove()方法只是从集合中删除一个模型,而Model.destroy()还会向集合的URL发送一个HTTP DELETE请求。

var MyModel = Backbone.Model.extend({
  defaults: {
    title:'',
    completed: false
  }
});

var MyCollection = Backbone.Collection.extend({
  model: MyModel,
  url: 'myapi'
});

var myCollection = new MyCollection();
myCollection.fetch();

var myModel2 = myCollection.get(2);
myModel2.destroy();
//发送一个HTTP DELETE请求到 /myapi/2,并删除对应集合

如果模型是新建的,在该模型上调用destroy()会返回false。

var myModel = new Backbone.Model();
console.log(myModel.destroy()); //false

选项

每一个RESTful API方法都接受各种个样的可选项参数,最重要的是,所有的方法都介绍成功(success)和错误(error)回调,用于自定义处理服务器响应(根据实际业务做出响应处理)。

在Model.save()方法上指定{patch: true}选项,将使用HTTP PATCH请求,仅仅发送已经改变的属性(比如局部更新)到服务器上,而不是发送整个模型——也就是model.save(attrs,{patch:true})。

同样,给Collection.fetch()传递{reset:true}选项,将返回使用reset()更新的集合,而不是set()。

发表评论

电子邮件地址不会被公开。 必填项已用*标注