如何绑定到反应变量的来源

Question

我正在构建可编辑和可排序的Table组件，它使用反应性$: sorted = sort(rows)变量。因此文本inputs不能直接绑定到rows。

操场

可以使用onchange事件。但我确实喜欢简洁明了的bind语法，并且只想在真正需要的地方使用onchange。

共有Table、Cell和StringEdit三个组分。我只想在Table和Cell之间使用onchange，作为Table -onchange-> Cell -bind-> StringInput。

问题：我不确定，如何将Cell上的bind指令转换为onchange事件？

我正试图用$: toOnChange(value)来做这件事，但它不太起作用，最终陷入了无休止的循环。

示例

表.速度

<script>
import Cell from "./Cell.svelte"
let rows = [["Kate", "Bishop"], ["Jim", "Raynor"]]

function sortByName(list) {
list = [...list]
return list.sort((a, b) => a[0].localeCompare(b[0]))
}

$: sorted = sortByName(rows)
</script>
<table>
{#each sorted as row, i (i)}
<tr>
{#each row as cell, j (`${i},${j}`)}
<Cell value={cell} onChange={(v) => rows[i][j] = v}/>
{/each}
</tr>
{/each}
</table>
<pre style="font-size: 10px;">{JSON.stringify(rows, null, 2)}</pre>

Cell.svelte

<script>
import StringEdit from "./StringEdit.svelte"

export let value
export let onChange

// Converting bind to onChange
let previous = value
function toOnChange(v) {
if (v === previous) return
previous = v
onChange(v)
}
$: toOnChange(value)
</script>
// if bind:value used it turns into endless loop
<svelte:component this={StringEdit} value={value}/>

StringEdit.svelte

<script>
export let value
</script>
<td contenteditable="true" bind:textContent={value}/>

附言：如果这种方法是错误的，并且有更好的选择，请同时提及。

Answer 1

您应该避免将索引用作元素的键。

如果对Cell组件进行排序并没有被破坏，而是简单地获取新数据，那么您可以在关于为每个块设置键(打开控制台并检查元素(的教程中很好地看到这一点。

与<span>在细胞中发生的情况相同：

组件相同，其属性发生变化

在我看来，你不太可能有那种形式的数据，你的表可能是一个包含对象的数组，如果这些对象有一个键，你可以使用这个键，至少不是i(行(，列可能不太可能改变顺序，在那里你可以坚持索引。