Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

实际上,只有一个操作的页面非常罕见。大多数情况下,你需要在页面上执行多个操作。在这个应用中,创建待办事项是不够的 — 我们已经完成了。

¥A page that only has a single action is, in practice, quite rare. Most of the time you’ll need to have multiple actions on a page. In this app, creating a todo isn’t enough — we’d like to delete them once they’re complete.

首先用名为 createdelete 的操作替换我们的 default 操作:

¥Begin by replacing our default action with named create and delete actions:

src/routes/+page.server
export const actions = {
	create: async ({ cookies, request }) => {
		const data = await request.formData();
		db.createTodo(cookies.get('userid'), data.get('description'));
	},

	delete: async ({ cookies, request }) => {
		const data = await request.formData();
		db.deleteTodo(cookies.get('userid'), data.get('id'));
	}
};

默认操作不能与命名操作共存。

¥[!NOTE] Default actions cannot coexist with named actions.

<form> 元素具有可选的 action 属性,类似于 <a> 元素的 href 属性。更新现有表单以使其指向新的 create 操作:

¥The <form> element has an optional action attribute, which is similar to an <a> element’s href attribute. Update the existing form so that it points to the new create action:

src/routes/+page
<form method="POST" action="?/create">
	<label>
		add a todo:
		<input
			name="description"
			autocomplete="off"
		/>
	</label>
</form>

action 属性可以是任何 URL — 如果操作是在另一个页面上定义的,则可能会有类似 /todos?/create 的内容。由于操作在此页面上,我们可以完全省略路径名,因此省略前导 ? 字符。

¥[!NOTE] The action attribute can be any URL — if the action was defined on another page, you might have something like /todos?/create. Since the action is on this page, we can omit the pathname altogether, hence the leading ? character.

接下来,我们要为每个待办事项创建一个表单,并带有一个唯一标识它的隐藏 <input>

¥Next, we want to create a form for each todo, complete with a hidden <input> that uniquely identifies it:

src/routes/+page
<ul class="todos">
	{#each data.todos as todo (todo.id)}
		<li>
			<form method="POST" action="?/delete">
				<input type="hidden" name="id" value={todo.id} />
				<span>{todo.description}</span>
				<button aria-label="Mark as complete"></button>
			</form>
		</li>
	{/each}
</ul>
上一页 下一页
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
<script>
	let { data } = $props();
</script>
 
<div class="centered">
	<h1>todos</h1>
 
	<form method="POST">
		<label>
			add a todo:
			<input
				name="description"
				autocomplete="off"
			/>
		</label>
	</form>
 
	<ul class="todos">
		{#each data.todos as todo (todo.id)}
			<li>
				{todo.description}
			</li>
		{/each}
	</ul>
</div>
 
<style>
	.centered {
		max-width: 20em;
		margin: 0 auto;
	}
 
	label {
		width: 100%;
	}
 
	input {
		flex: 1;
	}
 
	span {
		flex: 1;
	}
 
	button {
		border: none;
		background: url(./remove.svg) no-repeat 50% 50%;
		background-size: 1rem 1rem;
		cursor: pointer;
		height: 100%;
		aspect-ratio: 1;
		opacity: 0.5;
		transition: opacity 0.2s;
	}
 
	button:hover {
		opacity: 1;
	}
 
	.saving {
		opacity: 0.5;
	}
</style>