Question

我正在阅读David Turnbull的第二个流星应用程序（待办事项列表应用程序）教程，并且不同的jquery语法用于类似的事件，我不太明白为什么......

第一部分涉及添加任务的功能：

HTML：

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

JS：

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>

JS：

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

您有多个todoItem，它们都具有相同的名称。相反，请在没有jquery的情况下尝试event.target.inputName.value。

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

如果它不起作用，可能是因为您的输入没有唯一的ID /类。如果您将<li></li>替换为<form></form>（event.target），它应该有效，但不要认为它是最佳解决方案。我可能会将每个任务的ID添加到<input> id="{{_id}}"，并使用该ID选择元素。

event.target jquery：语法上的差异

1 个答案: