OctoberCMS: How to remove an item from todo list?

Question

I was following this tutorial to learn how to create a TODO list. But it ends without explaining how to remove an item from the list. Could somebody please post a sample code for it?

Here is the content of Todo\default.htm:

<script type="text/javascript" src="{{ ['assets/vendor/jquery.min.js']|theme }}"></script>
{% framework %}

<form 
    data-request="{{ __SELF__ }}::onAddItem" 
    data-request-success="$('#inputItem').val('')"
    data-request-update="'{{ __SELF__ }}::tasks': '#result'"
>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Tasks assigned to: {{__SELF__.name}} </h3>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <input name="task" type="text" id="inputItem" class="form-control" value=""/>
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary">Add</button>
                </span>
            </div>  
        </div>
        <ul class="list-group" id="result">
            {% partial __SELF__ ~ '::tasks' tasks = __SELF__.tasks %}
        </ul>
    </div>
</form>

And the content of tasks.htm partial:

{% for task in tasks %}
    <li class="list-group-item">
        {{ task }}
        <button class="close pull-right">&times;</button>
    </li>
{% endfor %}

I need to get the [X] button which removes a single task from the todo list working. My guess is that I should go with this:

{% for task in tasks %}
    <li class="list-group-item">
        {{ task }}
        <button class="close pull-right" data-request="{{ __SELF__ }}::onDeleteItem">&times;</button>
    </li>
{% endfor %}

I don't know though how to pass the id of each item to the onDeleteItem function.

Answer 1

Following is the code for default.htm

<form
data-request="{{ __SELF__ }}::onAddItem"
data-request-update="'{{ __SELF__ }}::tasks': '#result'"
data-request-success="$('#input-item').val('')"
>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">To Do List</h3>
    </div>
    <div class="panel-body">
        <div class="input-group">
            <input type="text" id="input-item" class="form-control" value="" name="task" placeholder="What needs to be done?"> 
            <span class="input-group-btn">
                <button type="submit" class="btn btn btn-primary" data-attach-loading>Add</button>

            </span>
        </div>
    </div>
    <ul class="list-group" id="result">
        {% partial __SELF__ ~ '::tasks' tasks = __SELF__.tasks %}
    </ul>
</div>

Following is the code in Todo.php

public function onRun(){

    //$this->tasks=Task::lists('title');
 $this->tasks=Task::all();

}
public function onAddItem()
{
    $taskName = post('task');

    $task=new Task;
    $task->title=$taskName;
    $task->save();


     $this->page['tasks']=Task::all();
}
 public function onDeleteItem()
{
    $id = post('id');
    $task=Task::find($id);
     $task->delete($id);


 $this->page['tasks']=Task::all();

}

and following is the code for tasks.php partial

    {% for task in tasks %}
<ul class="list-group">
<li class="list-group-item">{{task.title}}
    <button  type="button" class="close pull-right"
            data-request="{{ __SELF__ }}::onDeleteItem"
            data-request-update="'{{ __SELF__ }}::tasks': '#result'" 
            data-request-data="id:'{{task.id}}'" 

            >&times;</button>
    </li>
</ul>
{% endfor %}

It works perfectly for me in case of any problem let me inform

Answer 2

The [X] Button should use:

1. data-request to tell the php ajax handler, which procedure to call
2. data-request-data to tell the php ajax handler, which data to use

3. data-request-update to tell the javascript ajax handler, which partial to update

   <button 
     data-request="onDeleteItem" 
     data-request-data="deleteItem: '{{ task }}'" 
     data-request-update="'{{__SELF__}}::tasks': '#result'" 
     class="close pull-right">
     &times
   </button>
   

...and you will find the content of the task variable with

$taskToDelete=post('deleteItem');