backbone.js - Backbonejs 中的嵌套视图，帖子和评论关系

Question

对象数组

数据是从服务器接收的

var Updates = [
{"post_id":"1","post_desc":"This is my first  post",
     "comments":[{"id":1,"comment":"some comments","like":7},
                 {"id":9,"comment":"some   comments","like":3}
                ]
},
{"post_id":"2","post_desc":"This is my second  post",
     "comments":[{"id":5,"comment":"some comments","like":5}]
}]

模型：

var Update = Backbone.Model.extend({
   defaults:{
    photo: "default.png"
   }
 });

收藏：

var latestUpdates = Backbone.Collection.extend({
    model: Update
});

单视图：

var UpdateView = Backbone.View.extend({
tagName: "div",
className: "post-container",
template: $("#postTemplate").html(),

render: function () {
    var tmpl = _.template(this.template);

    this.$el.html(tmpl(this.model.toJSON()));
    return this;
}
});

主视图：

var UpdatesView = Backbone.View.extend({

el: $("#postContainer"),

initialize: function () {
    this.collection = new latestUpdates(Updates);
    this.render();
},
render: function () {
    var that = this;
    _.each(this.collection.models, function (item) {
        that.renderUpdates(item);
    }, this);
},
renderUpdates: function (item) {
    var updateView = new UpdateView({
        model: item
    });
    this.$el.append(updateView.render().el);
}

});

//create app instance
var wallUpdates = new UpdatesView();

如何在每个帖子下呈现评论部分？试图实现类似于facebook后评论系统的布局

Answer 1

我会使用CommentListView, 由您的UpdateView.tagName: "ul", className: "post-comments"

然后拥有了CommentView一个CommentListView。CommentView 的渲染不应将任何内容附加到 DOM，而是返回其$el.

CommentListView会告诉每个CommentView's 进行渲染，将每个$el's 附加到CommentListView's上$el。

对于容器，我会使用：

<div class="post-container" data-post-id="<%= YourPostId %>">
    <div class="post-body">
        <!--Your post can go in here-->
    </div>
    <ul class="post-comments">
        <!--Append your comments in here-->
    </ul>
</div>