JavaScript – 骨干JS复合模型获取

我有两个主干模型,从服务器加载:
var Model = Backbone.Model.extend({});
var SubModel = Backbone.Model.extend({});

var SubCollection = Backbone.Collection.extend({
    model: SubModel
});

var m = new Model();
m.fetch({success: function(model)
{
    model.submodels = new SubCollection();
    model.submodels.url = "/sub/" + model.get("id");
    model.submodels.fetch();
}});

所以,服务器必须发送两个单独的响应.例如:

{ name: "Model1",id: 1 } // For Model fetch

[{ name: "Submodel1",id: 1 },{ name: "Submodel2",id: 2 }] // For Submodel collection fetch

是否有一种方法可以一次性使用Submodel集合获取Model实例,如:

{ 
  name: "Model1",id: 1,submodels: [{ name: "Submodel1",id: 2 },{ name: "Submodel1",id: 2 }]
}

解决方法

为了能够做到这一点到你的后端 – 它与Backbone没有任何关系.

您可以配置您的后端技术以返回相关模型作为嵌套资源吗?

例如,如果您的后端是Rails,并且您的模型与ActiveRecord相关联,则这样做的一种方式就是

respond_to do |format|
  format.json  { render :json => @model.to_json(:include => [:submodels])}
end

你使用什么后端技术?

编辑:

对不起,你误解了你的问题的一个要点,一旦你的后端以正确的格式返回了JSON,是的,你需要在Backbone处理这些事情.

骨干-关系

处理它的一种方法是使用Backbone-Relational,一个用于处理相关模型的插件.

您通过“关系”属性定义相关模型:

SubModel = Backbone.RelationalModel.extend({});

SubCollection = Backbone.Collection.extend({
    model: SubModel
});

Model = Backbone.RelationalModel.extend({
  relations: [
    {
        type: 'HasMany',key: 'submodels',relatedModel: 'SubModel',collectionType: 'SubCollection'
    }
  ]
});

当您的Model获取JSON时,它将自动在“子模型”属性下创建一个SubCollection,并使用SubModels填充它 – 一个数组中的每个JSON对象.

骨干关系的jsfiddlehttp://jsfiddle.net/4Zx5X/12/

用手

如果你想要的话,你可以手工完成.涉及覆盖您的Model类的parse函数(原谅我,如果我的JS不是100%正确的 – 最近在我的大脑中使用了CoffeeScript)

var Model = Backbone.Model.extend({
  parse: function(response) {
    this.submodels = new SubCollection();
    // Populate your submodels with the data from the response.
    // Could also use .add() if you wanted events for each one.
    this.submodels.reset(response.submodels);
    // Now that we've handled that data,delete it
    delete response.submodels;
    // return the rest of the data to be handled by Backbone normally.
    return response;
  }
});

parse()在initialize()之前运行,在属性哈希设置之前,所以不能访问model.attributes,并且model.set()失败,因此我们必须将集合设置为模型的直接属性,而不是您通过get / set访问的“属性”.

根据您在“save()”中所要发生的情况,您可能需要重写`toJSON’,以使您的序列化版本看起来像您的API所期望的.

的jsfiddle

http://jsfiddle.net/QEdmB/44/

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...