实际上,只有一个操作的页面非常罕见。大多数情况下,你需要在页面上执行多个操作。在这个应用中,创建待办事项是不够的 — 我们已经完成了。
¥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.
首先用名为 create
和 delete
的操作替换我们的 default
操作:
¥Begin by replacing our default
action with named create
and delete
actions:
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:
<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:
<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>
<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>