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

Question

问题

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

例子

如果您想自己尝试一下，可以找到这个示例 in the REPL。

在此应用中：

您通过 {#await}

todos

您使用 {#each} 块遍历它们并在单击时切换它们的 done 属性。
如何更新 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}

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

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

Can you modify a result obtained via #await?

svelte

问题

例子

最后的话