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事件将span设置为contenteditable设置为true。不要像现在这样使用它作为助手：使用事件！像这里的东西：Meteor - Is there a way to get div contenteditable two way data binding to work? 或者在简单的jquery：HTML5 contentEditable with jQuery

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

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

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

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

1 个答案: