将 Backbone.js JSON 响应填充到嵌套集合/模型中的嵌套集合中

Question

我的问题是我刚开始使用 Backbone.js，并且无法解决一个复杂的问题。我想保存一个具有无限字段的表单，并且某些字段还需要具有无限选项。我只是担心我可能从错误的一端开始使用 JSON 响应，而不是先构建模型/集合。这是我尝试实现的简短伪代码。

id:
parent: <blockid>
fields: array(
  id:
  title:
  helpertext
  options: array(
    id:
    type:
    value:
  )
)

目前我正在处理来自服务器的伪造 JSON 响应，这是我从头开始构建的，现在我想在客户端将其划分为模型和集合。

//Fake a server response
var JSONresponse = {
    "formid":"1",
    "fields":[
        {
            "fieldid":"1",
            "title":"Empty title",
            "helper":"Helper text",
            "type":"radio",
            "options":[
                {
                    "optionid":"1",
                    "value":"Empty option.."
                },
                {
                    "optionid":"2",
                    "value":"Empty option.."
                }
            ]
        },
        {
            // fieldid2
        }
    ]
};

想法是添加我认为合适的字段，然后如果字段类型是 radio/checkbox/ul/ol，则字段中还必须有一个“选项”数组。

到目前为止我的工作：

    var app = {};
    app.Models = {};
    app.Collections = {};
    app.View = {};

    app.Models.Option = Backbone.Model.extend({
    });

    app.Collections.Options = Backbone.Collection.extend({
        model: app.Models.Option
    });

    app.Models.Field = Backbone.Model.extend({
        options: new app.Collections.Options()
    });

    app.Collections.Fields = Backbone.Collection.extend({
        model: app.Models.Field
    });

    app.Models.Form = Backbone.Model.extend({
        formid  : "1",
        fields: new app.Collections.Fields(),
        initialize: function() {
        }
    });

如何将我的 JSON 响应拆分为所有这些模型和集合？ （也许我应该重新评估我的方法，并改用 form.fieldList 和 form.optionList[fieldListId] 之类的东西。如果是这样，那会是什么样子？）

编辑：经过多次修复，这里有一点jsfiddle，但我仍然不知道如何使内部选项列表工作。

Answer 1

在普通 Backbone 中处理嵌套模型和集合的情况非常困难。

最简单的处理方式是这样的：

   var Option = Nested.Model.extend({
       idAttribute : 'optionid',

       defaults : {
          optionid : Integer
          value : ""
       }
    });

    var Field = Nested.Model.extend({
        idAttribute : 'fieldid',

        defaults : {
          fieldid : Integer,

          title : "",
          helper : "",
          type : "radio",
          options : Option.Collection
        }
    });

    var Form = Nested.Model.extend({
        idAttribute : 'formid',

        defaults : {
          formid: Integer,
          fields: Field.Collection
    });

https://github.com/Volicon/backbone.nestedTypes

就是这样。是的，您可以直接访问属性作为免费奖励，只需form.fields.first().options.first().value，没有get 和set 垃圾。

Answer 2

最简单的解决方案是使用Backbone Relational 或Backbone Associations。

文档应该足以帮助您入门。

如果您不想使用库，可以覆盖 Form 模型上的 parse 函数。

app.Models.Form = Backbone.Model.extend({
    defaults: {
        fields: new app.Collections.Fields()
    },

    parse: function(response, options) {
        return {
            formid: response.formid,
            fields: new app.Collections.Fields(_.map(response.fields, function(field) {
                if (field.options) {
                    field.options = new app.Collections.Options(field.options);
                }

                return field;
            }))
        };
    }
});

现在，如果您从服务器获取表单，响应将被解析为模型和集合的对象图。

form.get('fields') 将返回一个 app.Collections.Fields 集合。 form.get('fields').first().get('options') 将返回一个 app.Collections.Options 集合（如果存在任何选项）。

另外，您可以像这样创建表单模型：

var form = new app.Models.Form(JSONresponse, {
    parse: true
});

这将导致相同的对象结构。