（关于使用 Knockout 插件）如何将子对象数组作为 observablearray 绑定到父 observablearray答案

【问题标题】：(about using Knockout plugin) how to bind child object array as observablearray to the parent observablearray（关于使用 Knockout 插件）如何将子对象数组作为 observablearray 绑定到父 observablearray
【发布时间】：2012-01-31 20:54:57
【问题描述】：

我对淘汰插件很陌生，我正在尝试用这个插件构建一个评论线程。当子评论绑定到父评论时，我遇到了一些问题，预期的 json 字符串化对象应该如下所示；

[
    {
    CreatedBy: "user 1",
    CreatedOn: Date(),
    Description: "comment 1",
    ChildFeeds: [
                {
                    CreatedBy: "user 2",
                    CreatedOn: Date(),
                    Description: "comment 1-1"
                },
                {
                    CreatedBy: "user 3",
                    CreatedOn: Date(),
                    Description: "comment 1-2"
                },
                {
                    CreatedBy: "user 4",
                    CreatedOn: Date(),
                    Description: "comment 1-3"
                }
                ]
    },
    {
    CreatedBy: "user 5",
    CreatedOn: Date(),
    Description: "comment 2",
    ChildFeeds: [
                {
                    CreatedBy: "user 6",
                    CreatedOn: Date(),
                    Description: "comment 2-1"
                },
                {
                    CreatedBy: "user 7",
                    CreatedOn: Date(),
                    Description: "comment 2-2"
                }
                ]
    },
]

但是当我运行代码时，得到的是下面的数据，而不是上面的结构。

[
  {
    "CreatedBy": "user 1",
    "CreatedOn": "Mon Jan 02 2012 15:50:51 GMT+0200 (Turkey Standard Time)",
    "Description": "comment 1",
    "ChildFeeds": [
      {
        "ChildFeeds": [
          {
            "CreatedBy": "user 2",
            "CreatedOn": "Mon Jan 02 2012 15:50:51 GMT+0200 (Turkey Standard Time)",
            "Description": "comment 1-1"
          },
          {
            "CreatedBy": "user 3",
            "CreatedOn": "Mon Jan 02 2012 15:50:51 GMT+0200 (Turkey Standard Time)",
            "Description": "comment 1-2"
          },
          {
            "CreatedBy": "user 4",
            "CreatedOn": "Mon Jan 02 2012 15:50:51 GMT+0200 (Turkey Standard Time)",
            "Description": "comment 1-3"
          }
        ]
      }
    ]
  },
  {
    "CreatedBy": "user 5",
    "CreatedOn": "Mon Jan 02 2012 15:50:51 GMT+0200 (Turkey Standard Time)",
    "Description": "comment 2",
    "ChildFeeds": [
      {
        "ChildFeeds": [
          {
            "CreatedBy": "user 6",
            "CreatedOn": "Mon Jan 02 2012 15:50:51 GMT+0200 (Turkey Standard Time)",
            "Description": "comment 2-1"
          },
          {
            "CreatedBy": "user 7",
            "CreatedOn": "Mon Jan 02 2012 15:50:51 GMT+0200 (Turkey Standard Time)",
            "Description": "comment 2-2"
          }
        ]
      }
    ]
  }
]

在这里你会注意到由于错误的编码，不幸的是我为每个父对象复制了两次 ChildFeeds 对象数组。你可以从这里找到代码http://jsfiddle.net/6qAmu/5/

解决此问题的最佳方法是什么？

谢谢

【问题讨论】：

标签： json model-view-controller mvvm knockout.js

【解决方案1】：

现在您的ChildFeedModel 是一个包含ChildFeeds observableArray 的对象，因此当您将其分配给wallfeedsmodel 上的ChildFeeds 属性时，您最终会得到双重ChildFeeds。

一个选择是让你的ChildFeedsModel 实际上是一个 observableArray。因此，您将创建一个 observableArray，使用任何其他方法/属性对其进行扩展，然后将其返回。

类似：

var childFeedModel = function(ChildFeeds) {
    var result = ko.observableArray();

    result.addChildFeed = function(tempChildFeed) {

        result.push({
            CreatedBy: tempChildFeed.CreatedBy,
            CreatedOn: tempChildFeed.CreatedOn,
            Description: tempChildFeed.Description
        });
    };

    ko.utils.arrayForEach(ChildFeeds, function(feed) {
       result.addChildFeed(feed); 
    });

    return result;
};

我将其更改为以小写字母开头，因为它现在在创建一个时不需要new 语句（它总是返回一个新的 observableArray）。

现在，在您的 wallfeedsmodel 中，您只需将其分配为：

    return {
        CreatedBy: singlefeed.CreatedBy,
        CreatedOn: singlefeed.CreatedOn,
        Description: singlefeed.Description,
        ChildFeeds: childFeedModel(singlefeed.ChildFeeds)
    };

示例：http://jsfiddle.net/rniemeyer/xAKK5/

【讨论】：