0

我有三个不同的视图模板：“发布”、“评论”、“添加新评论”。主要模板是“post”。我需要了解如何将“评论”和“添加新评论”模板放入“帖子”模板中的 div 中。或任何其他方法来制作这个结构：

    - 邮政
        - 评论
        - 添加新的帖子表单
    - 邮政
    ...

它类似于脸书墙

用于骨干网的 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>
4

1 回答 1

1

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

于 2012-12-29T15:05:48.173 回答