使用复杂的JSON创建Backbone.js模型

我有如下的JSON响应

{
    "results": [
        {
            "name": "FOO",
            "containerName": "Foo",
            "accounts": [
                {
                    "id": "10445570_7601",
                    "shareeAccountInfo": "",
                    "siteAccountId": "271555",
                    "siteId": "271555",
                    "refreshMode": "NORMAL",
                    "isNetIncl": "true",
                    "propertyId": null,
                    "amount": [
                        "0.0",
                        "USD"
                    ]
                },
                {
                    "id": "1070_20537601",
                    "shareeAccountInfo": "",
                    "siteAccountId": "271555",
                    "siteId": "271555",
                    "refreshMode": "NORMAL",
                    "isNetIncl": "true",
                    "propertyId": null,
                    "amount": [
                        "0.0",
                        "USD"
                    ]
                }
            ]
        },
        {
            "name": "FOO123",
            "containerName": "Foo123",
            "accounts": [
                {
                    "id": "10445570_20601",
                    "shareeAccountInfo": "",
                    "siteAccountId": "271555",
                    "siteId": "271555",
                    "refreshMode": "NORMAL",
                    "isNetIncl": "true",
                    "propertyId": null,
                    "amount": [
                        "0.0",
                        "USD"
                    ]
                },
                {
                    "id": "10445570_37601",
                    "shareeAccountInfo": "",
                    "siteAccountId": "271555",
                    "siteId": "271555",
                    "refreshMode": "NORMAL",
                    "isNetIncl": "true",
                    "propertyId": null,
                    "amount": [
                        "0.0",
                        "USD"
                    ]
                }
            ]
        },
        {
            "name": "FOO83838",
            "containerName": "Foo3232",
            "accounts": [
                {
                    "id": "1601",
                    "shareeAccountInfo": "",
                    "siteAccountId": "271555",
                    "siteId": "271555",
                    "refreshMode": "NORMAL",
                    "isNetIncl": "true",
                    "propertyId": null,
                    "amount": [
                        "0.0",
                        "USD"
                    ]
                }
            ]
        }
    ]
}

从这个JSON响应创建主干模型时遇到问题。

---

我应该使用嵌套模型吗？我应该如何根据我的模型创建一个集合？相反，将这个JSON结构扁平化是一个好主意吗？有什么想法吗？

您的数据结构自然适合一组模型（我称之为模型

组

），其中每个

组

包含一组

帐户

模型。此集合（以及可选的其模型）应具有对父

组的引用

var Account = Backbone.Model.extend({

})

var Accounts = Backbone.Collection.extend({
  model: Account, 
  initialize: function(models, options) {
    this.parent = options.parent;
  }
});

var Group = Backbone.Model.extend({
  initialize: function() {
    this.accounts = new Accounts([], { parent: this });
  }
});

var Groups = Backbone.Collection.extend({
  model: Group,

  // Assuming you make requests to `/group` to produce your result JSON
  url: 'group',

  // Construct models from the `results` attribute of the response
  parse: function(response) {
    return response.results;
  }
});

有两种主要的实现选择：

坚持不懈
如果单个帐户可以独立于父容器进行持久化，可能使用像
/group/FOO83838/account/1601
这样的端点，
Acccount
模型可以使用默认的
Backbone.model.save
。
Accounts
集合应覆盖
url
以引用父url：

Accounts = Backbone.Collection.extend({
  // code from earlier

  url: function() {
    return this.parent.url() + '/account';
  }
});

如果帐户只能保存为整个
组
模型的一部分，则需要做两件事：

首先，重写
Account.save
以委托给父级的
save
方法：

Account = Backbone.Model.extend({
  // code from earlier

  save: function() {
    this.collection.parent.save();
  }
});

其次，覆盖
Group.toJSON
以包含子帐户：

Group = Backbone.Model.extend({
  // code from earlier

  toJSON: function() {
    var json = Backbone.Model.prototype.toJSON.call(this);
    json.accounts = this.accounts.toJSON();
    return json;
  }
});

（在本例中，我使用了集合的
parent
引用。如果您愿意，也可以在此模型上保存对父对象的引用）

事件
您可以允许应用程序代码直接侦听组帐户事件，在这种情况下不需要更改代码：

// Example view code
this.listenTo(group.accounts, 'change', this.onAccountChange, this);

或者，如果您喜欢额外的封装，可以转发子模型更改：

Group = Backbone.Model.extend({
  // code from earlier

  initialize: function() {
    this.accounts = new Accounts([], { parent: this });
    this.listenTo(this.accounts, 'all', this.onChildEvent, this);
  }

  onChildEvent: function(eventName, model, options) {
    // write logic to whitelist the events and parameters you are interested in
    this.trigger('child:' + eventName, model, options); 
  }
});


// Example view code 
this.listenTo(group, 'child:change', this.onAccountChange, this);

您还可以查看主干扩展，如（不再维护）或。我通常更喜欢对自定义实现进行更精细的控制。
这正是构建主干插件的目的。在处理前端和后端的模型时，使用关系映射将大大有助于您，而不是采用定制的方法。