Meteorjs编辑按钮，并从一个列表中删除，添加到另一个列表中

Question

这是我与流星的第一个项目，我是个新手。 需要帮助。 三个问题。 我想按编辑按钮将焦点放在任务的文本上，然后可以对其进行更改...如下所示：

<button class="editItem">Edit</button> 

然后，我可以编辑该li文本，这是功能：

editTask: function(id, todoItem){ 
   Tasks.update({_id: id}, {$set: { title:todoItem }}); 
}

如果我有输入类型字段，那么我就能做到，但是如何用按钮做到这一点（我想将普通文本变成输入字段）。

第二个问题：我有两栏， To Do和Done ：

<template name="task"> 
  <li>
    <span class="text">{{title}}</span></li>
    <button class="completed">Completed</button>
    <li><input type="text" name="task" class="edit"></li>
    <button class="saveItem">Save</button>
    <button class="cancelItem">Cancel</button>
    <button class="editItem">Edit</button>
    <button class="delete">Delete</button>
    <input type="checkbox" checked="{{checked}}" class="completed">
  </li>
</template> 
<template name="taskDone">
 <li>
  <div>
    <span class="text">{{title}}</span>
  </div>
 </li>
</template>

如何从To Do列表中隐藏已完成的任务并显示在Done列表中？ 当我按下“ Completed ”按钮时，可能会显示是或否，但我无法指出确切的方法。

我尝试过检查状态，但这不是我所需要的。

Answer 1

首先，示例代码中的<li>标记数量不正确（您在跨度结尾处关闭了第一个li，然后继续继续，就像仍然是相同的li一样）。

将完成的字段添加到您的集合，创建任务时最初设置为始终为“ no”。

然后，您要执行的操作是使用onclick事件将范围设置为contenteditable设置为true。 不要像现在那样将其用作帮助器：使用事件！ 像这样的东西： 流星-有没有办法让div contenteditable两种方式的数据绑定起作用？ 或者在简单的jquery中： HTML5 contentEditable with jQuery

然后，当您单击保存时，需要将其设置为false并更新完成的字段以说“是”或类似内容。

然后，您以简单的方式对待办任务和完成的任务进行不同的筛选：在模板任务中，您将执行Tasks.find({}, {fields: {"completed": "no"}}); 在模板taskDone中：

Tasks.find({}, {fields:{"completed": "yes"}});