Используя это в обратном вызове для не-сбора

Question

Я сейчас использую пример leaderboard, и я его закончил, но я не полностью удовлетворен своей реализацией функции add.

Начнем с того, мы имеем

Template.player.events({ 
    'click': function() { 
     Session.set("selected_player", this._id); 
    } 
}); 

Я нахожу это немного запутанным, как this связан с коллекцией игрока, но я думаю, что это связано с <template части. Я также могу сделать

Template.leaderboard.events({ 
    'click input.delete': function() { 
     Players.remove(this._id); 
    } 

... который удаляет игрока с соответствующей записью кнопки.

---

Теперь для фактического вопроса части: Я добавил это в нижней части лидеров шаблона:

<div> 
    Add player: (Name <input required name="name" id="name">) 
    (Score <input required name="score" id="score">) 
    <input class="add" type="button" value="Add"> 
</div> 

Это прекрасно работает, и я Template.leaderboard.events['click input.delete'] работает нормально, но для того, чтобы получить значения я использую:

'click input.add': function() { 
    var name = document.getElementById('name').value, 
     score = document.getElementById('score').value; 

было бы много смысла для меня, если бы я был в состоянии использовать this в некотором роде, или использовать это событие, чтобы каким-то образом получить значения, что-корреспондент на входах. Это не только имеет смысл для меня с точки зрения дизайна, но также будет охватывать случай одновременного отображения более одного из этих видов.

Итак, можно ли получить элементы, находящиеся рядом с целевым элементом, в контексте события?

Answer 1

Каждый обработчик событий имеет два аргумента: событие и шаблон. Подробнее об этих аргументах обработчика событий вы можете прочитать здесь: http://docs.meteor.com/#eventmaps

event.target - ссылка на элемент DOM, который инициировал событие. Затем вы можете использовать что-то вроде функций jQuery для перемещения элемента рядом.

Вы также можете установить входные значения в качестве свойств экземпляра шаблона. Например. в созданного обработчика шаблона, вы создаете имя и оценка свойства:

Template.player.created = function() { 
    this.name = ''; 
    this.score = ''; 
}; 

А потом обновлять эти значения в KeyUp событий ваших входных текстовых полей:

'keyup #name': function(event, template) { 
    template.name = event.target.value; 
}, 

'keyup #score': function(event, template) { 
    template.score = event.target.value; 
} 

Это так же самое что виджеты, сделанные для Ember, обновляют свои значения, как описано здесь: http://www.emberist.com/2012/04/12/two-way-binding-to-the-dom.html

Answer 2

Приятно видеть кого-то с таким количеством уличного кредита, используя Meteor!Лучший способ, чтобы получить значение является с event.currentTarget и получить вещи из контекста данных есть и другой способ, который не нуждается в DOM знаний

Template.player.events({ 
    'keypress #name':function(event,context) { 
     //Get the event sending this' value 
     console.log(event.currentTarget.value) 

     //Traverse the DOM on the template 'player' in this case 
     console.log(context.find('#score').value) 
    } 
}); 

В принципе, лучший способ, чтобы получить значение отправителем является использование event.currentTarget для доступа к DOM для этого объекта, отправляющего событие.

Причина, по которой это реализовано, вероятно, потому, что любой объект dom может отправлять событие, и он не обязательно всегда имеет поле value, поэтому при обработке карт событий требуется небольшое знание DOM, но с использованием event.currentTarget.value работает для большинства полой формы

данных контексты

Что касается контекста данных, вы должны быть в состоянии использовать данные, доступные в шаблонах из помощников, например, если Theres {{score}} & значения {{name}} в шаблоне O r помощник, который передается в этом случае через {{#each}} для каждого отдельного игрока.

this.name, 
this.score; 

Что тоже так же, как (я обычно использую context в моем помощнике, но template другой способ callng это я думаю, как и в ответ travellingprog в)

context.data.name, 
context.data.score; 

this помогает получить данные из контекст данных шаблона в событии, чтобы не было необходимости использовать скрытые атрибуты HTML, содержащие данные, например, с тем, как проигрыватель удаляется его бит чище, чем хранение _id в доме где-то. При этом event.currentTarget или context.find(..) - лучший способ получить данные из текстового поля.