More two-way binding

[Rich-Harris]

Currently only a few <input> types are supported – need to handle textareas, selects, contenteditable, etc etc...

[timdp]

How would you handle radio buttons? Knockout has something like this:

<label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
<label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
<label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>

(source)

[Garrett-]

I would suggest setting up click event handlers on each radio button. Then have a method to be used as an event callback, sending the input element to the event callback. Bellow is an example of this.

<label><input type="radio" name="signs" on:click="select({input: this})" value="Alpha"> Alpha</label>
<label><input type="radio" name="signs" on:click="select({input: this})" value="Beta"> Beta</label>
<label><input type="radio" name="signs" on:click="select({input: this})" value="Gamma"> Gamma</label>

<script>
  export default {
    data() {
      return {};
    },

    methods: {
      select({ input }) {

        if(input.checked) {
          // do something with the selected value

          // example: trigger a component event
          this.fire('select', { value: input.value });
        }

      }
    }
  };
</script>

I know it might be confusing having a method called select and triggering an event select. Just know that they're two different things. You could listen for the select event on the component and do some action with it.

import RadioButtons from './RadioButtons.js';

var radioButtons = new RadioButtons({
  target: document.querySelector('.radios')
});

radioButtons.on('select', function({ value }) {
  console.log('Selected radio button value is', value);
});

EDIT: If all you wanted to do with the radio buttons is trigger a component event you can remove the select method all together.

<label><input type="radio" name="signs" on:click="fire('select', {value: this.value})" value="Alpha"> Alpha</label>
<label><input type="radio" name="signs" on:click="fire('select', {value: this.value})" value="Beta"> Beta</label>
<label><input type="radio" name="signs" on:click="fire('select', {value: this.value})" value="Gamma"> Gamma</label>

<script>
  export default {
    data() {
      return {};
    }
  };
</script>

[timdp]

That's not two-way binding, it's just MVC.

[Garrett-]

@timdp You're right. There isn't any two-way bindings for radio button inputs. They're not supported at this time.

[timdp]

Well, my question was more about how they will be supported, since that's what this issue is about. 😄

[Garrett-]

You could create your own radio input component. I've played around with an idea of a <RadioGroup /> component. I have not built or tested this yet. It's just an idea, I might give it a go and report back.

RadioGroup.html

{{#if radios}}
  {{#each radios as radio}}
    <label>
      <input type="radio" name="{{groupName}}" value="{{radio.value}}" on:click="select({radio: this})">
      {{radio.label}}
    </label>
  {{/each}}
{{/if}}

<script>
  export default {
    data() {
      return {
        value: '',
        group: 'group',
        radios: []
      };
    },

    methods: {
      select({ radio }) {
        if(radio.checked) {
          // Sets the value property equal to the selected radios value
          this.set({value, radio.value});
        }
      }
    }
  }
</script>

App.js

<!--
sets up a two-way binding between the RadioGroup components internal `value`
property and the App components `selectedRadioValue` property

Source: https://svelte.technology/guide#nested-components
-->
<RadioGroup value="{{selectedRadioValue}}" group="signs" radios=signRadios />

<script>
import RadioGroup from './RadioGroup.js';

export default {
  data() {
    return {
      selectedRadioValue: '',
      signRadios: [
        {
          label: 'Alpha',
          value: 'Alpha'
        },
        {
          label: 'Beta',
          value: 'Beta'
        },
        {
          label: 'Gamma',
          value: 'Gamma'
        }
      ]
    };
  }
};
</script>

[PaulBGD]

How about binding and requiring a name for the checkboxes/radios? Then we can use the name to indicate which one is selected.

[Rich-Harris]

I'm opening individual issues for different two-way binding cases. Particularly keen to hear feedback on #311 as it pertains to the discussion above. Will close this issue in favour of the new ones. Thanks!