Question

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

Answer 1

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/