CODEWITHSUNDEEP
javascriptractivejs
BenRoe
BenRoe

Reputation: 1893

Ractive.js set an object as radio input value

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'
    }

});

Upvotes: 1

Views: 395

Answers (2)

Rich Harris
Rich Harris

Reputation: 29585

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!

Upvotes: 1

Mark Meyer
Mark Meyer

Reputation: 3723

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>

Upvotes: 0

Related Questions