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）。

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

然后您想要做的是将跨度设置为 contenteditable 设置为 true 并使用 onclick 事件。不要像现在这样将它用作助手：使用事件！像这里的东西：Meteor - Is there a way to get div contenteditable two way data binding to work? 或者在简单的 jquery 中：HTML5 contentEditable with jQuery

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

然后，您只需对待办任务和已完成任务的集合进行不同的简单过滤：在模板任务中，您将执行类似Tasks.find({}, {fields: {"completed": "no"}}); 的操作 在模板taskDone中：

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