2

我正在按照本教程学习如何创建 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] 按钮从待办事项列表中删除单个任务。我的猜测是我应该这样做：

{% 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函数。

4

2 回答 2

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

如果有任何问题，它对我来说非常有用，让我通知

于 2018-07-21T05:03:38.130 回答
0

[X] 按钮应使用：

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

  3. 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');

于 2015-12-04T11:29:37.010 回答