Does Svelte support checkbox binding?

Asked By: Anonymous

Does Svelte support bindings for checkboxes?

I am aware that the documentation says the following, so it is possible that it has yet to be implemented.

Two-way binding is not yet fully implemented. Check back soon for the full list of available bindings!

I imagine that the implementation would look something like this.

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

However, when I try this at the moment, it does not seem to work.

Update

Upon further investigation, it seems that the binding is working in some way, with the bound value changing in the component data. However, for some reason, changes are not being reflected in the DOM. They can be reflected by simply setting the data to be itself (component.set({checked: component.get('checked')})), forcing a DOM update, but they are not being reflected automatically, as they should with binding.

Update 2

I have created a REPL to demonstrate this problem.

Solution

Answered By: Anonymous

In your example, you need to bind the component as well as the <input> element:

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

You can see it working here.