在 svelte 中使用临时编辑绑定对象

Question

我有这个 svelte repl 作为我正在尝试做的事情的例子：

https://svelte.dev/repl/91d21e1baa564ecea6afbc4df7d9d24c?version=3.23.2

目标是实现双向绑定，但通过按钮控制/触发从组件到应用程序的方式。

简单的方式由于直接引用对象而绕过。但是，克隆对象会阻塞从 Component 返回到 App 的路径。

我很迷茫，不知道该怎么做。

感谢您的帮助。

编辑原代码

App.svelte

<script>
    import Component from "./Component.svelte";
    let object = {name: "project"};
</script>

<h1>Main</h1>
<input type="text" bind:value={object.name} />
<hr>
<Component bind:object={object} />

Component.svelte

<script>
    export let object;
    //$: tempObject = object;
    $: tempObject ={...object};
</script>

<h1>Component</h1>
<input type="text" bind:value={tempObject.name} />
<button type="button" on:click={() => object = tempObject}>Save</button>

Answer 1

你是对的，你需要一个中间对象来做到这一点。

您必须注意的是，修改本地副本时不要更新源对象。

这是一种方法：

Component.svelte

<script>
    export let object

    let local

    const update = () => {
        local = { ...object }
    }

    const commit = () => {
        object = local
    }

    // when source object changes, update local
    //
    // /!\ local must be appear in this reactive block, 
    //     or the update will loop back
    //
    $: object, update()
</script>

<h1>Component</h1>
<input type="text" bind:value={local.name} />
<button type="button" on:click={commit}>Save</button>

重要的一点是 local 变量必须 而不是 出现在将更改从源传播到本地副本的反应块中。或者你会得到一种更新循环。

为此，请将 local = {...object} 赋值替换为您将从反应块调用的函数（示例中的 update）。这样 local 变量本身就可以受到影响，而无需 Svelte 在其值更改时重新运行反应块。

在 svelte 中使用临时编辑绑定对象

binded object with temp editing in svelte

svelte

svelte-component

svelte-3