Ractive two way binding with multiple values

Question

I have multiple row of radio inputs. User have to select either fixed or percentage from each row. i.e

I can't find the best definition in the ractive documentation.

when my js has {name: 'foo', checked: true}

And my template has

<input type="radio" name="{{name}}" value="fixed" checked="{{checked}}">Fixed

I can not do that in ractive as its saying

A radio input can have two-way binding on its name attribute, or its checked attribute - not both

Is there any documentation anywhere you know can help me to use multiple value in in input element.

Or how can I do that in ractive?

Thanks.

Answer 1

When you use two-way binding with radio inputs, Ractive will automatically check the one that has the same value as the bound variable (in your case name):

<input type="radio" name="{{day}}" value="Monday">
<input type="radio" name="{{day}}" value="Tuesday">
<input type="radio" name="{{day}}" value="Wednesday">
<input type="radio" name="{{day}}" value="Thursday">
<input type="radio" name="{{day}}" value="Friday">
<input type="radio" name="{{day}}" value="Saturday">
<input type="radio" name="{{day}}" value="Sunday">

new Ractive({
    el: 'body',
    template: '#template',
    data: {
        // Friday will be checked by default.
        day: 'Friday'
    }
});

Tutorial: http://learn.ractivejs.org/two-way-binding/1