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

CanJS
1

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

2

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

3

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

4

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.

5

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.

6

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
7

@justinbmeyer

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

Is this going to be the new syntax?

8

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.