javascript - Backbone.js 中的嵌套模型，如何处理

Question

我从服务器获得了以下 JSON。有了这个，我想创建一个带有嵌套模型的模型。我不确定实现这一目标的方法是什么。

//json
[{
    name : "example",
    layout : {
        x : 100,
        y : 100,
    }
}]

我希望将它们转换为具有以下结构的两个嵌套主干模型:

// structure
Image
    Layout
...

所以我这样定义布局模型:

var Layout = Backbone.Model.extend({});

但是我应该使用以下两种(如果有的话)技术中的哪一种来定义图像模型？下面是 A 还是 B？

一个

var Image = Backbone.Model.extend({
    initialize: function() {
        this.set({ 'layout' : new Layout(this.get('layout')) })
    }
});

或者， B

var Image = Backbone.Model.extend({
    initialize: function() {
        this.layout = new Layout( this.get('layout') );
    }
});

Answer 1

我在编写 Backbone 应用程序时遇到了同样的问题。必须处理嵌入式/嵌套模型。我做了一些我认为是非常优雅的解决方案的调整。

是的，您可以修改 parse 方法来更改对象中的属性，但所有这些实际上都是非常难以维护的代码 IMO，感觉更像是 hack 而不是解决方案。

以下是我对您的示例的建议:

首先像这样定义布局模型。

var layoutModel = Backbone.Model.extend({});

然后这是你的图像模型:

var imageModel = Backbone.Model.extend({

    model: {
        layout: layoutModel,
    },

    parse: function(response){
        for(var key in this.model)
        {
            var embeddedClass = this.model[key];
            var embeddedData = response[key];
            response[key] = new embeddedClass(embeddedData, {parse:true});
        }
        return response;
    }
});

请注意，我没有篡改模型本身，而只是从解析方法传回所需的对象。

当您从服务器读取时，这应该确保嵌套模型的结构。现在，您会注意到这里实际上没有处理保存或设置，因为我觉得您可以使用适当的模型显式设置嵌套模型。

像这样:

image.set({layout : new Layout({x: 100, y: 100})})

另请注意，您实际上是在调用嵌套模型中的解析方法:

new embeddedClass(embeddedData, {parse:true});

您可以根据需要在 model 字段中定义任意数量的嵌套模型。

当然，如果您想将嵌套模型保存在自己的表中。这还不够。但是对于将对象作为一个整体进行读取和保存的情况，这个方案应该就足够了。