Question

我正在关注this tutorial以了解如何创建TODO列表。但它结束时没有解释如何从列表中删除项目。有人可以发一个示例代码吗？

以下是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>

tasks.htm部分的内容：

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

我需要获取[X]按钮，从todo列表中删除单个任务。我的猜测是我应该这样做：

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

我不知道如何将每个项目的id传递给onDeleteItem函数。

Answer 1

以下是 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>

以下是 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();

}

以及以下是 tasks.php 部分

的代码

    {% 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 %}

如果有任何问题，请让我通知

Answer 2

[X]按钮应该使用：

data-request告诉php ajax处理程序，调用哪个程序
data-request-data告诉php ajax处理程序，使用哪些数据

data-request-update告诉javascript ajax处理程序，哪个部分更新

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

...您将在

$taskToDelete=post('deleteItem');

OctoberCMS：如何从待办事项列表中删除项目？

2 个答案: