(关于使用Knockout插件)如何将子对象数组作为observablearray绑定到父observablearray

发布于 2024-12-23 13:20:08 字数 2806 浏览 0 评论 0原文

我对淘汰赛插件很陌生,我正在尝试用这个插件构建一个评论线程。当子评论绑定到父评论时,我遇到一些问题,预期的 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/

实现此问题的最佳方法是什么?

谢谢

i'm quite new to knockout plugin and i'm trying to build a commentthread with this plugin. I've some issues when a child comment is bind to parent comment , the expected json stringified object should be some thing like below;

[
    {
    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"
                }
                ]
    },
]

but when i run the codes a get the below data instead of the structure of the above one.

[
  {
    "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"
          }
        ]
      }
    ]
  }
]

here you'll notice that because of wrong coding , unfortunately i duplicate the ChildFeeds object array twice for each parent object.. you can find the code from here http://jsfiddle.net/6qAmu/5/

what is the best approach to achieve this issue?

thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

失退 2024-12-30 13:20:08

现在,您的 ChildFeedModel 是一个包含 ChildFeeds observableArray 的对象,因此当您将其分配给 wallfeedsmodel< 上的 ChildFeeds 属性时/code>,您最终会得到双 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/

Right now your ChildFeedModel is an object that contains a ChildFeeds observableArray, so when you assign this to a ChildFeeds property on your wallfeedsmodel, you end up with the double ChildFeeds.

One option is to have your ChildFeedsModel actually be an observableArray. So, you would create an observableArray, extend it with any additional methods/properties, then return it.

Something like:

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

I changed it to start with a lower-case letter, because it would now not require a new statement when creating one (it always returns a new observableArray).

Now, in your wallfeedsmodel you would just assign it like:

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

Sample here: http://jsfiddle.net/rniemeyer/xAKK5/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文