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，则字段中也必须有“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或Backbone Associations。

文档应足以帮助您入门。

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

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
});

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

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响应填充到嵌套集合/模型中的嵌套集合中

2 个答案: