Question

我有三种不同的视图模板：“发布”，“评论”，“添加新评论”。主要模板是“帖子”。我需要找出如何在“post”模板中将“comments”和“添加新注释”模板放入他们的div中。或者任何其他方法来构建这种结构：

    - post
        - comments
        - add new post form
    - post
    ...

类似于facebook wall

Backface的Javascript：

// Post View
var PostView = Backbone.View.extend({
    template: $("#post").html(),
    ...
    render: function () {
        var tmpl = _.template(this.template);
        var thisPost = this.model.toJSON();
        this.$el.html(tmpl(thisPost));
    }
});
var postView = new PostView();
postView.render();

// Comments List
var CommentsListView = Backbone.View.extend({
    el: '#comments', // how to place it to #comments div in "post" template? This line doesn't work
    ...
    addNewCommentForm: function (post_id) {
        var tmpl = _.template($("#addCommentTemplate").html());
        this.$('#addNewComment').append(tmpl()); // How to place it to #addNewComment div in "post" template? This line doesn't work
    }
});

HTML：

<script id="post" type="text/template">
    <%= text %>
    <div id='comments'>...</div>
    <div id='addNewComment'>...</div>
</script>

Answer 1

您的代码存在许多问题。第一个是您实际上没有将PostView.el放入DOM中。通过PostView.render()，您将填充PostView.$el，然后填充PostView.el，但您实际上并未将其放入页面（DOM）。此外，通过在el上设置CommentsListView，您实际上并没有在那里做任何事情。如果您想将el设置为现有元素，那么您可以执行以下操作：el: $('#comments')。或者，如果您想动态呈现CommentsListView并将其注入DOM，那么您可以通过定义id属性来使元素具有“注释”ID：id: 'comments' 。这些只是代码中最明显的两个问题。我在这里运行了一个半工作的示例：http://codepen.io/jayd3e/pen/hAEDv。

Backbone：带有模板的动态视图层次结构

1 个答案: