Вложенные представления в 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рендеринга, добавляя каждый из своих $elк 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>