创建和删除任务列表当然，显示任务只是第一步；您还希望用户能够添加新任务和任务列表。那么让我们在 $APP_ROOT/index.php 中定义一个新路由：
1
2
3
4
5
6
7
| <?php
// ... other routes
$app->get('/add-list', 'authenticate', function () use ($app) {
$app->render('add-list.php');
});
|
借助此路由，对 /add-list 的请求将生成一个要向用户呈现的 $APP_ROOT/templates/add-list.php 模板。下一个清单显示了此模板的内容。authenticate() 函数是一个自定义函数，在执行路由回调之前执行；查看 ，您会看到它检查了一个访问令牌，如果没有找到该令牌，它会将客户端重定向到登录页面，提示重新登录。
清单 4. 任务列表创建表单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
| <!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" />
<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>
</head>
<body>
<div data-role="page">
<div data-role="header">
Add List
</div>
<div data-role="content">
<div data-role="collapsible-set">
<form method="post" action="/add-list">
<label for="title">Title:</label>
<input name="title" id="title" data-clear-btn="true" type="text"/>
<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>
|
清单 4 包含一个表单，其中只有一个字段，表示新任务列表的标题。提交时，表单数据将 POST 回 /add-list 路由，后者现在需要扩展来处理表单输入。以下是额外的代码：
清单 5. 任务列表创建1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <?php
// ... other routes
$app->post('/add-list', 'authenticate', function () use ($app) {
if (isset($_POST['submit'])) {
$title = trim(htmlentities($_POST['title']));
if (empty($title)) {
$title = 'Untitled List';
}
$tasklist = new Google_TaskList();
$tasklist->setTitle($title);
$result = $app->tasksService->tasklists->insert($tasklist);
$app->redirect('/index');
}
});
|
清单 5 清除了通过表单提交的标题，然后创建一个新的 Google_TaskList 对象。此对象表示 Google Tasks API 中的一个任务列表资源。该对象的 setTitle() 方法用于分配一个标题，然后，该服务对象的 insert() 方法将新任务列表保存到 Google Tasks 中。
以下是这个表单，以及提交它的结果：
 如果现在检查 Gmail 中的 Google Tasks 界面，您也应该在这里看到新添加的任务列表。您可亲自尝试！
如果已允许用户添加列表，那么您还需要为他们提供一种删除列表的方式。服务对象的 insert() 方法的反向方法是 delete() 方法，它接受一个任务列表标识符并从 Google Tasks 删除相应的列表。以下是路由定义：
清单 6. 任务列表删除1
2
3
4
5
6
7
8
| <?php
// ... other routes
$app->get('/delete-list/:lid', 'authenticate', function ($lid) use ($app) {
$app->tasksService->tasklists->delete($lid);
$app->redirect('/index');
});
|
清单 6 设置一个新路由 /delete-list，它接受一个列表标识符，使用该标识符作为请求 URL 的一部分。Slim 的路由框架随后会解析这个请求 URL，提取列表标识符，使用服务对象的 delete() 方法从 Google Tasks 删除相应的列表。
现在所剩只有更新索引页面列清单，增添添加和删除列表的按钮。以下是修订的索引页面的代码：
清单 7. 索引页面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
| <!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" />
<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>
</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>
<?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; ?>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
<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>
</div>
<a href="/add-list" data-inline="true" data-role="button"
data-icon="plus" data-theme="b">Add new list</a>
</div>
</body>
</html>
|
除了添加和删除列表的新按钮之外，这个视图脚本版本还添加了一些额外的增强。此时我们显示了任务的截止日期，已完成的任务有一条划过它们的删除线，而仍为完成的任务 (status="needsAction") 则没有删除线。以下是该页面的显示效果。
 |
