Meteorjs edit button and removing from one list adding to other

Question

This is my first project with meteor and I am a heavy newbie. Need help with this. Three questions. I want when I press the edit button to focus on text of a task and I can change it... something like this:

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

and after that I can edit text of that li , this is the functionality:

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

And I'm able to do it if I have input type field, but how to do that with a button (I want to turn ordinary text into input field).

Second question: I have two columns, To Do and 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>

How can I hide completed tasks from To Do list and show up in Done list? Maybe display true or false when I press the button Completed but I cannot pin point the exact way.

I tried playing with checked state but that isn't what I need.

Answer 1

First off you have an incorrect number of <li> tags in your example code (you close the first li at the end of the span and then continue onwards as if it still were the same li).

Add a completed field to your collection, set initially to always "no" when you create a task.

What you want to do then, is set the span as contenteditable set to true with an onclick event. Do not use it as an helper as you currently do: use events! Something like here: Meteor - Is there a way to get div contenteditable two way data binding to work? Or here in simple jquery: HTML5 contentEditable with jQuery

Then when you click save you need to set it as false and update the completed field to say "yes" or something the like.

Then the way you just simple filter the collection differently for the todo tasks and the completed ones: in the template task you will do something like Tasks.find({}, {fields: {"completed": "no"}}); In the template taskDone:

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