在苗条中绑定具有临时编辑的对象

Question

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

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

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

由于对象的直接引用，简单的方法绕过了。 但是，克隆对象会阻止从组件返回到应用程序的方法。

我很困惑，不知道该怎么做。

感谢您的帮助。

编辑原始代码

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 重新运行反应块，变量本身就会受到影响。