javascript - Meteorjs 编辑按钮并从一个列表中删除添加到其他列表

Question

这是我第一个使用 Meteor 的项目，我是一个重度新手。需要帮助。三个问题。我希望当我按下编辑按钮时将注意力集中在任务的文本上，并且我可以更改它......如下所示:

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

如何隐藏待办事项列表中已完成的任务并显示在完成列表中？当我按下按钮Completed时，可能会显示 true 或 false，但我无法确定确切的方式。

我尝试使用选中状态，但这不是我需要的。

Answer 1

首先，您的 <li> 号码不正确示例代码中的标签(关闭跨度末尾的第一个 li，然后继续向前，就好像它仍然是相同的 li)。

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

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

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

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

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