将 Backbone.js JSON 响应填充到嵌套 collections/models 内的嵌套集合中

Question

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

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，则字段中还必须有一个 "options" 数组。

我目前的工作：

    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 Relational or Backbone Associations。

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

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

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') 将 return 一个 app.Collections.Fields 集合。如果存在任何选项，form.get('fields').first().get('options') 将 return 一个 app.Collections.Options 集合。

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

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

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

Answer 2

很难直接处理嵌套模型和集合的情况 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 垃圾。

将 Backbone.js JSON 响应填充到嵌套 collections/models 内的嵌套集合中

Populate Backbone.js JSON response into nested collections inside nested collections/models

javascript

collections

json

backbone.js

underscore.js