Question

我有一个已经呈现帖子集合的视图：

Social.Views.StreamsIndex = Backbone.View.extend({

  template: JST['streams/index'],

  render: function(){
    $(this.el).html(this.template({
        entries: this.collection.toJSON()
    }));
    return this;
  }
});

现在我必须评论一个帖子，我必须为其发表一个不同的评论模板：

Social.Views.StreamsIndex = Backbone.View.extend({

  template: JST['streams/index'],
  events: {
    'submit .comment_submit': 'comment_create'
  },
  comment_create: function(event) {
    //create comment code

创建后我想做这样的事情，以便它可以呈现评论模板

    $("#comment).html(this.template1({
        comment: comment
    }));
  }
});

是否可以从同一视图渲染两个模板？

编辑:(添加视图）

Social.Views.StreamsIndex = Backbone.View.extend({

template: JST['streams/index'],
template1: JST['streams/comment'],

events: {
    'submit .comment_submit': 'comment_create'
},

initialize: function(){
    this.collection.on('reset', this.render, this);
    this.model = new Social.Models.StreamsIndex();
    this.model.bind('comment_createSuccess', this.comment_createSuccess);
},

render: function(){
    $(this.el).html(this.template({
        entries: this.collection.toJSON()
    }));
    return this;
},

comment_create: function(event) {
    event.preventDefault();
    event.stopPropagation();
    post_id = $(event.currentTarget).attr("data-post-id");
    href = $(event.currentTarget).attr('action');
    comment_text = $("#comment_txt_"+post_id).val();
    this.model.create_comment(href, post_id, comment_text); // this sends ajax request and post the comment to server
},

comment_createSuccess: function(data, post_id) {
    this.$("#comment_for_post_"+post_id).append(this.template1({
      comment: data
    }));
}
});

Answer 1

这里绝对没有问题，因为模板无论如何都不是Backbone结构的一部分。我只有一条评论，即您应该在视图中使用this.$（这是this.$el.find的快捷方式，因此您只能找到视图的后代）。

因此...

this.$('#comment').append(this.template1({ // changed to append to be used several times
    comment: comment
}));

修改
关于您的上下文问题：

this.model.bind('comment_createSuccess', this.comment_createSuccess);

在这里，您可以使用bind的第3个参数来设置回调的上下文：

this.model.bind('comment_createSuccess', this.comment_createSuccess, this);
您的回调中的
this（comment_createSuccess）现在将成为您的观点我个人宁愿使用会自动绑定上下文的Events#listenTo：

this.listenTo(this.model, 'comment_createSuccess', this.comment_createSuccess);

在相同视图中的backbone.js中呈现不同的模板

1 个答案: