在 Svelte 中是否可以使用 #each 循环来双向绑定到嵌套对象值？

以下 Svelte 代码运行良好：

<input bind:value='options.name.value' placeholder='{{options.name.placeholder}}'>
<p>Hello {{options.name.value || 'stranger'}}!</p>

使用此 JSON：

{
    "options": {
        "name": {
            "value": "",
            "placeholder": "enter your name"
        }
    }
}

。但是如果我们想循环怎么办options与#each数组……可以吗？

It almost如果我们执行除绑定之外的所有操作，则有效：

{{#each Object.keys(options) as option}}
<input bind:value='options.name.value' placeholder='{{options[option].placeholder}}'>
<p>Hello {{options[option].value || 'stranger'}}!</p>
{{/each}}

占位符正确，并且双向绑定工作正常。但代码还不正确，因为options.name是硬编码的绑定，而不是使用循环值。要是我们, 投入bind:value='options[option].value'，我们得到一个语法错误，Expected '.

那么，如果可以使用循环值在循环内进行双向绑定，那么正确的语法是什么？

简短的回答是的，绝对可以在一个内部使用双向绑定each块，但块的值必须是一个简单的数组，而不是像这样的表达式的结果Object.keys(options):

{#each options as option}
  <input bind:value={option.value} placeholder={option.placeholder}>
{/each}

{
  "options": [
    {
      "id": "name",
      "value": "",
      "placeholder": "enter your name"
    },
    {
      "id": "email",
      "value": "",
      "placeholder": "enter your email"
    }
  ]
}

较长的答案，其中我大声思考了一会儿：使用一个表达式（这不仅仅是像这样的引用foo或非计算成员表达式，例如foo.bar）对于双向绑定来说是一个有趣的挑战。实际上有两个不同的问题：首先，区分有效的表达式，例如options[option].value以及在双向绑定上下文中没有任何意义的表达式。其次，each块表达式创建了一种障碍——如果有人这样做......

{#each Object.keys(options) as option}
  <input bind:value={option}>
{/each}

...它们将绑定到一个本质上是只读的值。但仅通过查看语法是无法看出这一点的。因此，静态分析需要足够智能才能理解绑定到options[option].name有效但具有约束力option不是。值得我们思考的事情。

最后，秘密选项 is to ，因为它实际上只是事件监听器的一个方便的包装器：

<script>
  let options = {
    name: {
      value: '',
      placeholder: 'enter your name'
    }
  };

  function updateValue(option, value) {
    options[option].value = value;
  }
</script>

{#each Object.keys(options) as option}
  <input
    on:input="{() => updateValue(option, e.target.value)}"
    placeholder={options[option].placeholder}
  >
{/each}