您可以修改通过#await 获得的结果吗？

Question

问题

我正在尝试在 Svelte 中利用 {#await}，但似乎无法找到一种方法使其结果具有响应性 ({:then result})。

示例

如果您想亲自尝试，可以找到此示例in the REPL。

在这个应用程序中：

1. 你通过{#await}从服务器加载了一些todos
2. 您使用 {#each} 块对其进行迭代，并在单击时切换其 done 属性。
3. 如何更新todos？

App.svelte

<script>
    import Todo from "./Todo.svelte";
    
    const todos = [{
        title: 'Todo 1',
        done: false
    }, {
        title: 'Todo 2',
        done: false
    }];
    
    const getTodos = new Promise((res, rej) => setTimeout(res.bind(null,todos), 1000));
    
    const updateTodos = ({detail: change}) => {
        // ¿How can I update todos?
        console.log(change);
    }
</script>

{#await getTodos}
    Loading..
{:then todos}
    {#each todos as todo}
        <Todo {todo} on:change={updateTodos}></Todo>    
    {/each}
    <pre>{JSON.stringify(todos,null,2)}</pre>
{:catch error}
    {error}
{/await}

Todo.svelte

<script>
    export let todo = null;
    
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();
    
    const toggle = () => {
        todo = {...todo,done:!todo.done};
        dispatch("change",todo);
    };
</script>

{#if todo}
    <li on:click={toggle}>
        {todo.title}
        ({todo.done})
    </li>
{/if}

最后的话

我只对利用{#await}的解决方案感兴趣，我可以用其他模式解决这个问题。

Answer 1

<Todo bind:todo={todo} />

在上下文中：

App.svelte

<script>
    import Todo from "./Todo.svelte";
    
    const todos = [{
        title: 'Todo 1',
        done: false
    }, {
        title: 'Todo 2',
        done: false
    }];
    
    const getTodos = new Promise((res, rej) => setTimeout(res.bind(null,todos), 1000));
    
    const updateTodos = ({detail: change}) => {
        // process any change if needed (save or something?)
        console.log(change);
    }
</script>

{#await getTodos}
    Loading..
{:then todos}
    {#each todos as todo}
        <Todo bind:todo on:change={updateTodos} />
    {/each}
    <pre>{JSON.stringify(todos,null,2)}</pre>
{:catch error}
    {error}
{/await}

不过，如果您决定这样做，请注意不要过多地交叉数据流。