Как мне обрабатывать события шаблона, когда существует несколько экземпляров шаблона?
У меня есть один и тот же шаблон в 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
на странице одновременно (несколько #savePost
s) который является недействительным 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.
}
Дайте мне знать, если это работает.