Svelte 是否支持复选框绑定？答案

【问题标题】：Does Svelte support checkbox binding?Svelte 是否支持复选框绑定？
【发布时间】：2017-12-19 16:00:14
【问题描述】：

Svelte 是否支持复选框绑定？

我知道文档说明了以下内容，因此它可能尚未实施。

双向绑定尚未完全实现。请稍后再回来查看可用绑定的完整列表！

我想实现应该是这样的。

<input type="checkbox" bind:checked="checked">

但是，当我现在尝试这个时，它似乎不起作用。

更新

经过进一步调查，绑定似乎以某种方式起作用，绑定值在组件数据中发生了变化。但是，由于某种原因，更改并未反映在 DOM 中。它们可以通过简单地将数据设置为自身 (component.set({checked: component.get('checked')})) 来反映，强制更新 DOM，但它们不会像绑定那样自动反映。

更新 2

我有created a REPL 来演示这个问题。

【问题讨论】：

标签： svelte

【解决方案1】：

在您的示例中，您需要绑定组件以及 <input> 元素：

<Component bind:checked="checked"></Component>

你可以看到它在工作here。

【讨论】：

太好了，感谢您的帮助。这并没有引起我的注意，因为我的印象是，一旦数据属性从父组件传递到子组件，它们就已经绑定在一起了。是不是这种情况下父组件到子组件是单向绑定，而:bind声明了父子间的双向绑定？
完全正确，是的——它是这样设计的，因此单向数据流是默认的，双向绑定是可选的（因为如果盲目这样做会导致讨厌的突变错误）跨度>
我尝试了链接示例，但它显示“无法加载 ./App.html：O 不是函数”
@poshaughnessy 尝试更新的链接（它使用的是旧版本的 Svelte，语法已过时）

【解决方案2】：

这可以通过

<script>
     let checked = false;
</script>


<input type=checkbox bind:checked={checked}>

现在变量checked被绑定到checkbox的值了。

你可以在this neat little example试试这个

【讨论】：