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

Question

我有如下 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 结构是个好主意吗？有什么想法吗？

Answer 1

您的数据结构自然适合模型集合（我将模型称为Group），其中每个Group 包含Account 模型的集合。此集合（以及可选的模型）应该具有对父 Group 的引用。

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

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

首先，重写 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 引用。如果您愿意，还可以在此模型上保存对父级的引用）。

活动

您可以允许应用代码直接监听Group.accounts 事件，在这种情况下无需更改代码：

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

您还可以查看像 DeepModel（不再维护）或 Relational 这样的 Backbone 扩展。我通常更喜欢对自定义实现进行更精细的控制。