Ractive.js set an object as radio input value

Question

Is it possible to set an object as the value of an radio input?

It tried this http://jsfiddle.net/benroe/fah5f/3/, but it's not working. Is that a bug?

#template

<script id='tempMain' type='text/ractive'>
{{# products}}
    <h1>{{name}}</h1>
    {{# options:i}}
        <div class='radio'>
            <label>
                <input type='radio' name='{{selectedRadio}}' value='{{options[i]}}'>{{name}}
            </label>
        </div>
    {{/}}
{{/}}
</script>

javascript

productData = [
{ name: 'Cameras', options: [
    { name: 'Canon', price: '396'},
    { name: 'Sony', price: '449'}
]}];

ractive = new Ractive({
    el: '#template',
    template: '#tempMain',
    data: {
        products: productData,
        selectedRadio: 'no Radio selected'
    }

});

Answer 1

This is actually a bug that crept into the recent 0.4.0 release but was fixed a couple of days ago. The {{options[i]}} value - which (because it's inside the {{#products:i}} section) should resolve as products.0.options.0 and products.0.options.1 and so on - is instead resolving as options.0 and options.1.

There are two solutions. One is to simply use {{this}} instead of {{options[i]}} - that resolves correctly (see fiddle). This assumes that in your real app (as opposed to this reduced test case) you're able to do that.

The second is to use the development version, which includes the fix: http://cdn.ractivejs.org/edge/ractive.js.

We'll try and push out a new stable version in the near future. Sorry for the inconvenience!

Answer 2

According to the w3 spec value can only be a string value http://www.w3.org/TR/html-markup/input.radio.html#input.radio.attrs.value

However you could use the string as a key for an object. Change your data to be something like

productData = [
  { name: 'Cameras', options: {
    Canon: { name: 'Canon', price: '396'},
    Sony: { name: 'Sony', price: '449'}
  }}];

and then change your template to be

<script id='tempMain' type='text/ractive'>
{{# products}}
    <h1>{{name}}</h1>
    {{# options:i}}
        <div class='radio'>
            <label>
                <input type='radio' name='{{selectedRadio}}' value='{{i}}'>{{name}}
            </label>
        </div>
    {{/}}
{{/}}
</script>