0

私はノックアウトが初めてで、最初にいくつかの問題があります。次のモデルを検討してください。

// @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変数には、ルートに親を持たない投稿を含むすべての投稿のグラフが含まれます。たとえば、次のツリーの場合、1 つの要素、つまりルートを含む配列を返します。その応答は C1 と C2 であり、C1 の応答の配列には C3 のみが含まれます。問題は、ルートが期待どおりに入力され、その返信が C1 と C2 であるにもかかわらず、C1 の返信が、すべてのプロパティ (content、reply_to、および返信) が定義されていないタイプ DiscussionPost の 4 つの要素を含む配列を返すことです。Knockouts の監視可能な配列の代わりに、モデルで通常の JavaScript 配列を使用すると、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 に答える