CODEWITHSUNDEEP
javascriptjqueryractivejs
mmrs151
mmrs151

Reputation: 4072

Ractive two way binding with multiple values

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

enter image description here

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.

Upvotes: 0

Views: 740

Answers (3)

drzaus
drzaus

Reputation: 25004

Per @martypdx's answer, you only need to associate/bind the input to the property it represents, but the trick was that in order for the input value to match the property value (what @martin-kolarik meant) when the value is a boolean is that you need to wrap it with handlebars (like @martypdx did).

Granted, if you're trying to create a POST-able form (since you want the name to show up as the input name), this won't be correct because Ractive will name the input from the context/keypath.

Updated fiddle -- http://jsfiddle.net/drzaus/9jan1j7q/1/

Template

<table>
{{#each list}}
    <tr>
        <th>{{name}}</th>
        <td>
            <label><input type="radio" name="{{checked}}" value="{{true}}">Fixed</label>
            <label><input type="radio" name="{{checked}}" value="{{false}}">%</label>
        </td>
    </tr>
{{/each}}

<pre>{{json(this)}}</pre>

Ractive

function createEntry() {
    return { name: Math.random().toString(36), checked: Math.random() < 0.5 }
}

function createList(n) {
    var list = [];
    while(n-- >= 0) list.push(createEntry());
    return list;
}

var r = new Ractive({
    el: document.body,
    template: '#template',
    data: {
        list: createList(5)
        ,
        // debug formatting
        json: function(arg) { return JSON.stringify(arg, undefined, 4); }

    }
})

Upvotes: 0

martypdx
martypdx

Reputation: 3712

I think this will do what you want (though I'm not entirely sure about your data model):

<input type="radio" name="{{checked}}" value="{{ true }}">Fixed
<input type="radio" name="{{checked}}" value="{{ false }}">%
<br>
{{name}} is {{checked}}

where

data: {
    name: 'foo', checked: true
}

See http://jsfiddle.net/9jan1j7q/

Upvotes: 0

Martin Kol&#225;rik
Martin Kol&#225;rik

Reputation: 731

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

Upvotes: 1

Related Questions