event.target jquery: различия в синтаксисе

Question

Я собираюсь использовать второе приложение Meteor от Дэвида Тернбулла (приложение для списка дел), а для подобных событий используется другой синтаксис jquery, и я не совсем понимаю, почему. ..

Первая часть включает в себя функцию для добавления задачи:

HTML:

<template name="addTodo"> 
<form> 
Create a task: 
<input type="text" placeholder="Type a task here..." name="todoName" autocomplete="off"> 
</form> 
</template> 

ЯШ:

Template.addTodo.events({ 
'submit form': function(event){ 
    event.preventDefault(); 
    var todoName = $('[name="todoName"]').val(); 
    Todos.insert({ 
    name: todoName, 
    completed: false, 
    createdAt: new Date() 
    }); 
} 
}); 

Вторая часть включает в себя редактирование задач с помощью KeyUp функции:

HTML:

<template name="todos"> 
{{> addTodo}} 
<ul> 
{{# each todo}} 
    {{> todoItem}} 
{{/each}} 
</ul> 
</template> 

<template name="todoItem"> 
<li> 
    <input type="text" value="{{name}}" name="todoItem"> 
</li> 
</template> 

ЯШ:

Template.todoItem.events({ 
'keyup [name=todoItem]': function(event){ 
    var documentId = this._id; 
    var todoItem = $(event.target).val(); 
    Todos.update({ _id: documentId }, {$set: {name: todoItem }}); 
    } 
}); 

Я пытался использовать запрос event.target ниже во второй части (редактирование), но это не помогло:

var todoItem = $('[name="todoItem"]').val(); 

Почему это? В каких случаях мы используем их?

Answer 1

У вас есть несколько todoItems, и все они имеют одинаковое имя. Вместо этого попробуйте event.target.inputName.value без jquery.

//event 
Template.todoItem.events({ 
    'keyup [name=todoItem]': function(event){ 
     var documentId = this._id; 
     var todoItem = event.target.todoItem.value; 
     Todos.update({ _id: documentId }, {$set: {name: todoItem }}); 
    } 
}); 

Если это не поможет, возможно, потому, что ваши входы не имеют уникального идентификатора/класса. Он должен работать, если вы замените <li></li> на <form></form> (event.target), но не считайте его лучшим решением. Вероятно, я добавлю идентификатор каждой задачи в <input>, например id="{{_id}}", и выберите элемент, используя этот идентификатор.