创建和删除任务就像可以添加和删除任务列表一样，也可在列表中添加和删除任务。以下是用于此用途的新 /add-item 和 /delete-item 路由：
清单 8. 任务添加和删除1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <?php
// ... other routes
$app->get('/add-task/:tid', 'authenticate', function ($tid) use ($app) {
$app->render('add-task.php', array('id' => $tid));
});
$app->post('/add-task', 'authenticate', function () use ($app) {
if (isset($_POST['submit'])) {
$title = trim(htmlentities($_POST['title']));
$due = trim(htmlentities($_POST['due']));
$id = trim(htmlentities($_POST['id']));
if (empty($title)) {
$title = 'Untitled Task';
}
if (empty($due)) {
$due = 'tomorrow';
}
$task = new Google_Task();
$task->setTitle($title);
$task->setDue(date(DATE_RFC3339, strtotime($due)));
$result = $app->tasksService->tasks->insert($id, $task);
$app->redirect('/index');
}
});
$app->get('/delete-task/:lid/:tid', 'authenticate', function ($lid, $tid) use ($app) {
$app->tasksService->tasks->delete($lid, $tid);
$app->redirect('/index');
});
|
每个任务都必须与一个任务列表相关联，所以 /add-task 路由回调被设置为接收一个任务列表标识符作为 GET 请求参数。然后，它会呈现 $APP_ROOT/templates/add-task.php 模板，其中包含一个添加新任务的表单，该模板如此清单中所述：
清单 9. 任务创建表单1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/
jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/
datebox/latest/jqm-datebox.min.css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.3.2/
jquery.mobile-1.3.2.min.js"></script>
<script src="//dev.jtsage.com/cdn/datebox/latest/
jqm-datebox.core.min.js"></script>
<script src="//dev.jtsage.com/cdn/datebox/latest/
jqm-datebox.mode.calbox.min.js"></script>
<script src="//dev.jtsage.com/cdn/datebox/i18n
/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
Add Task
</div>
<div data-role="content">
<div data-role="collapsible-set">
<form method="post" action="/add-task">
<input name="id" type="hidden" value="<?php echo $id; ?>" />
<label for="title">Title:</label>
<input name="title" id="title" data-clear-btn="true" type="text"/>
<label for="due">Due:</label>
<input name="due" id="due" type="date" data-role="datebox"
data-options='{"mode": "calbox", "useFocus": true,
"themeDateToday": "e"}' />
<input name="submit" value="Save" type="submit"
data-icon="check" data-inline="true" data-theme="a" />
<a href="/index" data-role="button" data-inline="true"
data-icon="back" data-theme="a">Back</a>
</form>
</div>
</div>
</body>
</html>
|
清单 9 包含一个具有两个可见字段的表单，一个字段用于任务标题，另一个字段用于任务截止日期。为了简化日期输入，日期输入字段被配置为使用 jQuery Mobile DateBox 插件，该插件显示一个图形化的日期选取器，以便通过单击来输入日期 。因为任务必须与一个任务列表有关联，所以作为 GET 参数而收到的任务列表标识符也在表单中被指定为一个隐藏字段。
提交表单后，输入其中的数据就会被清除，并用于初始化一个 Google_Task 对象。然后这个对象与隐藏的任务列表标识符一起传递给服务对象的 insert() 方法，该方法负责通过 GEST 调用将它添加到 Google Tasks 系统中。最后，像 /add-task 回调一样，/delete-task 路由回调被配置为同时接收任务列表标识符和任务标识符。然后，它使用服务对象的 delete() 方法来从指定的任务列表中删除指定的任务。
在设置了路由和业务登录后，剩下的任务就是更新索引页面、添加任务添加和删除按钮。因为我很快就会介绍如何更新任务的状态，所以现在正好为此功能添加一个按钮。以下是修订后的模板：
清单 10. 索引页面1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/
jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css"
href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.3.2/
jquery.mobile-1.3.2.min.js"></script>
<script src="//dev.jtsage.com/cdn/datebox/latest/
jqm-datebox.core.min.js"></script>
<script src="//dev.jtsage.com/cdn/datebox/latest/
jqm-datebox.mode.calbox.min.js"></script>
<script src="//dev.jtsage.com/cdn/datebox/i18n/
jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
Tasks
</div>
<div data-role="content">
<div data-role="collapsible-set" data-inset="false">
<?php foreach ($lists['items'] as $list): ?>
<?php $id = $list['id']; ?>
<div data-role="collapsible">
<h2><?php echo $list['title']; ?></h2>
<ul data-role="listview">
<?php if (isset($tasks[$id]['items'])): ?>
<?php foreach ($tasks[$id]['items'] as $task): ?>
<li>
<div class="ui-grid-b">
<div class="ui-block-a">
<?php if ($task['status'] == 'needsAction'): ?>
<h3><?php echo $task['title']; ?></h3>
<?php else: ?>
<h3 style="text-decoration:line-through">
<?php echo $task['title']; ?></h3>
<?php endif; ?>
<?php if (isset($task['due']) &&
($task['status'] == 'needsAction')): ?>
<p>Due on <?php echo date('d M Y',
strtotime($task['due'])); ?></p>
<?php endif; ?>
<?php if (isset($task['completed']) &&
($task['status'] == 'completed')): ?>
<p>Completed on <?php echo
date('d M Y', strtotime($task['completed'])); ?></p>
<?php endif; ?>
</div>
<div class="ui-block-b"></div>
<div class="ui-block-c">
<?php if ($task['status'] == 'needsAction'): ?>
<a href="/update-task/<?php echo $id; ?>/
<?php echo $task['id']; ?>" data-inline="true"
data-role="button" data-icon="check"
data-theme="a">Done!</a>
<?php endif; ?>
<a href="/delete-task/
<?php echo $id; ?>/<?php echo $task['id']; ?>"
data-inline="true" data-role="button" data-icon="delete"
data-theme="a">Remove task</a>
</div>
</div>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul> <br/>
<a href="/add-task/<?php echo $id; ?>"
data-inline="true" data-role="button" data-icon="plus"
data-theme="a">Add new task</a>
<a href="/delete-list/<?php echo $id; ?>"
data-inline="true" data-role="button" data-icon="delete"
data-theme="a">Remove list</a>
</div>
<?php endforeach; ?>
</div>
<a href="/add-list" data-inline="true" data-role="button"
data-icon="plus" data-theme="b">Add new list</a>
</div>
</div>
</body>
</html>
|
如清单 10 所示，每个任务列表的标记都已更新，将每个列表转换为一个两列网格。左侧列包含任务标题和截止日期。右侧列包含可为该任务执行的操作，比如更新它还是删除它。最后还有一个新按钮，该按钮支持使用新任务更新此列表。
向任务列表添加新任务的过程类似于：
 |
