以下 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"
}
}
}
You can see it in action .但是,如果我们想用 #each
数组遍历 options
怎么办……这可能吗?
如果我们做除绑定(bind)之外的所有事情,它几乎可以工作:
{{#each Object.keys(options) as option}}
<input bind:value='options.name.value' placeholder='{{options[option].placeholder}}'>
<p>Hello {{options[option].value || 'stranger'}}!</p>
{{/each}}
You can see占位符正确,双向绑定(bind)工作正常。但是代码还不正确,因为 options.name
是为绑定(bind)而硬编码的,而不是使用循环值。如果我们try to fix that ,放置 bind:value='options[option].value'
,我们得到一个语法错误,Expected '
。
那么,如果可以使用循环值在循环内进行双向绑定(bind),那么正确的语法是什么?
最佳答案
简短的回答 是的,在 each
block 中使用双向绑定(bind)是绝对可能的,但是 block 的值必须是一个简单的数组,而不是像 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
) 这样的双向绑定(bind)是一个有趣的挑战。实际上有两个不同的问题:首先,区分像 options[option].value
这样的有效表达式和在双向绑定(bind)上下文中没有任何意义的表达式。其次,each
block 表达式创建了一种障碍 — 如果有人要这样做...
{#each Object.keys(options) as option}
<input bind:value={option}>
{/each}
...它们会绑定(bind)到一个本质上是只读的值。但是你不能仅仅通过查看语法来判断。因此,静态分析需要足够聪明,才能理解绑定(bind)到 options[option].name
是有效的,但绑定(bind)到 option
则不是。值得我们思考的事情。
最后, secret 选项是not use two-way binding in this context ,因为它实际上只是一个方便的事件监听器包装器:
<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}
关于javascript - 在 Svelte 中是否有可能让 #each 循环与嵌套对象值的双向绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42737693/