[英]Is it possible in Svelte to have #each loops with two-way binding to nested object values?
The following Svelte code works fine:以下 Svelte 代码运行良好:
<input bind:value='options.name.value' placeholder='{{options.name.placeholder}}'>
<p>Hello {{options.name.value || 'stranger'}}!</p>
Using this JSON:使用这个 JSON:
{
"options": {
"name": {
"value": "",
"placeholder": "enter your name"
}
}
}
You can see it in action . 您可以看到它的实际效果。 But what if we want to loop over
options
with an #each
array...is that possible?但是,如果我们想使用
#each
数组遍历options
怎么办……这可能吗?
It almost works if we do everything except the 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 that the placeholder is correct, and the two-way binding works correctly. 可以看到占位符是正确的,双向绑定工作正常。 But the code is not correct yet, because
options.name
is hard-coded in for the bind, instead of using the loop value.但是代码还不正确,因为
options.name
是为绑定而硬编码的,而不是使用循环值。 If we try to fix that , putting bind:value='options[option].value'
, we get a syntax error, Expected '
.如果我们尝试修复它,放置
bind:value='options[option].value'
,我们会得到一个语法错误, Expected '
。
So, if it's possible to two-way bind within a loop using the loop value, what's the correct syntax?那么,如果可以使用循环值在循环内进行双向绑定,那么正确的语法是什么?
The short answer is that yes, it's absolutely possible to use two-way binding inside an each
block, but the value of the block has to be a straightforward array, rather than the outcome of an expression like Object.keys(options)
:简短的回答是,是的,绝对可以在
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"
}
]
}
The longer answer , in which I think aloud for a few moments: using an expression (that isn't just a reference like foo
or non-computed member expression like foo.bar
) for two-way binding is an interesting challenge.更长的答案,我在其中大声思考了一会儿:使用表达式(不仅仅是像
foo
这样的引用或像foo.bar
这样的非计算成员表达式)进行双向绑定是一个有趣的挑战。 There are actually two separate issues: firstly, distinguishing between valid expressions like options[option].value
and expressions that wouldn't make any sense in a two-way binding context.实际上有两个独立的问题:首先,区分像
options[option].value
这样的有效表达式和在双向绑定上下文中没有任何意义的表达式。 Secondly, the each
block expression creates a sort of barrier — if someone were to do this...其次,
each
块表达式创建了一种障碍——如果有人要这样做......
{#each Object.keys(options) as option}
<input bind:value={option}>
{/each}
...they'd be binding to a value that is essentially read-only. ...它们将绑定到一个本质上是只读的值。 But you can't tell that just from looking at the syntax.
但是你不能仅仅从语法上看出这一点。 So the static analysis would need to be smart enough to understand that binding to
options[option].name
is valid but binding to option
isn't.所以静态分析需要足够聪明才能理解绑定到
options[option].name
是有效的,但绑定到option
不是。 Something for us to think about.值得我们思考的东西。
Finally, the secret option is to not use two-way binding in this context , since it's really just a convenient wrapper around event listeners:最后,秘密选项是不在此上下文中使用双向绑定,因为它实际上只是一个方便的事件侦听器包装器:
<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}
<script>
let options = {
name: {
value: '',
placeholder: 'enter your name'
},
};
$: console.table(options)
</script>
{#each Object.entries(options) as [key, option]}
<input
bind:value={option.value}
placeholder={option.placeholder}
>
{/each}
https://svelte.dev/repl/a77dd18da023469da962d873e6fb391f?version=3.47.0 https://svelte.dev/repl/a77dd18da023469da962d873e6fb391f?version=3.47.0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.