0

我是 Knockout 的新手，刚开始时遇到了一些问题。考虑以下模型：

// @param {String} content Content of the post
// @param {number} reply_to ID indicating to which post this post is replying
// @param {Array} replies Array of DiscussionPosts indicating replies to this post 
var DiscussionPost(content, reply_to, replies) {
    var self = this;
    self.content = content;
    self.reply_to = reply_to;
    self.replies = ko.observableArray(
        ko.utils.arrayMap(replies, function(reply) {
            return new DiscussionPost(reply.content, reply.reply_to, reply.replies);
        })

}

现在对于我的视图模型，考虑我将所有帖子都放在一个名为的平面数组中allPosts，并尝试使用以前的模型构建一个结构，如下所示：

var rootPosts = allPosts.filter(function (o) {
    return o.reply_to === null;
});
var result = (function iterate(posts) {
    var tree = [];
    $.each(posts, function(i, post){
        var replies = allPosts.filter(function(o) {
            return o.reply_to === post.id;
        });
        if (replies.length > 0) {
            replies = iterate(replies);
        }

        var tmpPost = new DiscussionPost(post.content, post.reply_to, replies);
        tree.push(tmpPost);
    });
    return tree;
})(rootPosts);

从理论上讲，该result变量应包含所有帖子的图表，其中包含在根目录下没有任何父级的帖子。例如，对于下面的树，它应该返回一个包含一个元素的数组，即根，那么它的回复应该是 C1 和 C2，而 C1 的回复的数组应该只包含 C3。问题是根按预期填充，它的回复是 C1 和 C2，但 C1 的回复返回一个包含四个 DiscussionPost 类型元素的数组，其中所有属性（内容、reply_to 和回复）都是未定义的。如果我在模型中使用常规 javascript 数组而不是 Knockouts 的 observable 数组，那么即使在 100 级深，一切都可以正常工作。

    root
    / \ 
   /   \
  C1   C2
 /
C3
4

1 回答 1

1

非递归方法怎么样？

function DiscussionPost(post) {
    var self = this;
    self.content = ko.observable(post.content);
    self.reply_to = ko.observable(post.reply_to);
    self.replies = ko.observableArray([]);
}

var result = (function (posts) {
    var index = {}, root = "null";

    // root level
    index[root] = new DiscussionPost({});

    // transform into DiscussionPost objects, index by ID
    ko.utils.arrayForEach(posts, function (post) {
        index[post.id] = new DiscussionPost(post); 
    });

    // build tree
    ko.utils.arrayForEach(posts, function (post) {
        if (post.reply_to in index) {
            index[post.reply_to].replies.push(index[post.id]);
        } else {
            // orphaned post
        }
    });

    return index[root].replies;
})(allPosts);

对于大量帖子，这也应该表现得更好。它也比您的方法更容易阅读和调试。

于 2013-05-20T07:05:39.293 回答