How do you use the newer stache binding syntax with radio buttons?

How do you do this…

    <input can-value="foo" type='radio' value='bar1' name='foobar'>
    <input can-value="foo" type='radio' value='bar2' name='foobar'>

…by using the newer stache binding syntax instead of can-value? Specifically, I don’t know what name stache expects for this binding. I have tried the following, none of which seemed to do it:

    <input {($value)}="foo" type='radio' value='bar1' name='foobar'>
    <input {($value)}="foo" type='radio' value='bar2' name='foobar'>

    <input {($selected)}="foo" type='radio' value='bar1' name='foobar'>
    <input {($selected)}="foo" type='radio' value='bar2' name='foobar'>

    <input {($checked)}="foo" type='radio' value='bar1' name='foobar'>
    <input {($checked)}="foo" type='radio' value='bar2' name='foobar'>

All of the documentation I have found refers to the old can-value syntax, such as: https://canjs.com/docs/can.view.bindings.can-value-radio.html

Unfortunately, I don’t think this has been solved yet besides "just use can-value" unless you want to write a bunch of code.

is going to address this issue. I would use can-value for these use cases for now.

Thanks for the quick responses. The documentation had given me the impression that the newer syntax was able to completely replace the use of can-value and that can-value shouldn’t at this point be needed. Thanks for the clarification that that’s not the case. I don’t know if maybe it’s worth specifying in the docs which cover the new syntax that can-value is still the only and preferred way to handle radio buttons. I guess it depends on how much time it’s expected that can-value will still have this use case.

Dear Everyone Who is Confused,

To help you avoid having to experiment and clarify, you can put can-value stuff in with {($click)} stuff and it works nicely. Eg, this works correctly and as one would hope…

<input {($value)}="workingUser.username"/>
<input type="checkbox" {($checked)}="workingUser.isActive"> Is Active
<input type='radio' can-value='workingUser.role' value='nurse'/> Nurse
<input type='radio' can-value='workingUser.role' value='editor'/> Editor
<input type='radio' can-value='workingUser.role' value='admin'/> Admin

That is, all the values are set in the form when it is opened and all the values are set in the view model as they are changed.

Just a note, if you use ({$click}) and can-value on the same element, the click happens before can-value gets updated so you will need to use a setTimeout in the click handler for things to behave correctly.

1 Like

@justinbmeyer

https://github.com/canjs/can-stache-bindings/issues/49

Is this going to be the new syntax?

Matthew created a new stache modul called "converters"
http://canjs.github.io/canjs/doc/can-stache-converters.html
There are some examples that explain working with radio buttons and checkboxes.