Как мне обрабатывать события шаблона, когда существует несколько экземпляров шаблона?

У меня есть один и тот же шаблон в 2 местах с такими параметрами:

{{> newPost isReply=true replyTo=this}}

Когда я ставлю точку останова в вспомогательном методе, я вижу, что переменная this.isReply действительно имеет значение true, а hoverer в функции событий - false. Я думаю, что причина в том, что есть несколько включений одного и того же шаблона, и еще один, где этот флаг установлен в false, и селектор также подходит этому шаблону, и он вызывается, поэтому я получаю эту несоответствие контекста данных между шаблонами. Вот пример селектора:

'click #savePost' : function() {
      if (this.isReply) {
      ....

Мой вопрос, может быть, кто-то может объяснить, как именно метеор работает в такой ситуации и как должен подходить к такой ситуации? Прямо сейчас я думаю, что решение будет #savePost уникальным для каждого шаблона, но меня интересует, является ли способ, которым я движусь, хорошей практикой в ​​метеоре? Также, как вы понимаете, шаблон newPost содержит кнопку #savePost, как мне сделать его уникальным? Я не могу сделать:

'click #savePost' + someId : function() {

2 ответа

Прежде всего, если я правильно понимаю, у вас есть несколько одинаковых idна странице одновременно (несколько #savePosts) который является недействительным HTML. Вместо этого вы должны сделать это классом (.savePost).

В любом случае, вам разрешено иметь один и тот же селектор в нескольких местах, и Метеор может различать их. В функции события у вас есть доступ к контексту данных и цели события.

Например:

Template.newPost.events({
    'click .savePost': function (event) {
        console.log(this); // this will return the data context
        console.log(this.isReply); // this should give you a correct value
        console.log($(event.target)); // this is how to select the button that was just clicked
        console.log($(event.target).val()); // this will give you the value
    }
});

Это должно работать независимо от того, сколько шаблонов используют один и тот же класс для события щелчка.

Я думаю, что проблема в том, что вы пытаетесь получить доступ к данным, используя this, Правильный путь заключается в использовании Template.instance().data, Пример:

'click #savePost': function( e, tmpl ) {

  if ( tmpl.data.isReply )
    //do stuff.

}

Дайте мне знать, если это работает.

Другие вопросы по тегам