Визуализация другого шаблона в backbone.js в том же представлении

У меня есть представление, которое уже отображает коллекцию сообщений:

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
    }));
}
});

person Srikanth Jeeva    schedule 22.04.2013    source источник


Ответы (1)


Здесь нет абсолютно никаких проблем, так как шаблоны в любом случае не являются частью структуры Backbone. У меня есть только одно замечание: вы должны использовать this.$ внутри вашего представления (это сокращение для this.$el.find, поэтому вы найдете только потомков вашего представления el).

So...

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

Изменить:
О вашей проблеме с контекстом:

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

Здесь вы можете использовать третий аргумент bind для установки контекста обратного вызова:

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

this в обратном вызове (comment_createSuccess) теперь будет вашим представлением.
Лично я предпочел бы использовать Events#listenTo, который автоматически привязывал бы контекст:

this.listenTo(this.model, 'comment_createSuccess', this.comment_createSuccess);
person Loamhoof    schedule 22.04.2013
comment
Прохладный. Когда я пытаюсь, я получаю эту ошибку: this.$ не является функцией. Я что-то упустил? - person Srikanth Jeeva; 22.04.2013
comment
@Srikanth публикует свое представление целиком, у вас может быть проблема с контекстом (источник). - person Loamhoof; 22.04.2013
comment
Я отредактировал свой вопрос с помощью View - person Srikanth Jeeva; 22.04.2013
comment
Фантастический! Большое спасибо за эту помощь. Я сделал это this.listenTo(this.model, 'comment_createSuccess', this.comment_createSuccess), и это работает как шарм. - person Srikanth Jeeva; 22.04.2013