Question

是否可以将对象设置为无线电输入的值？

它尝试了http://jsfiddle.net/benroe/fah5f/3/，但它没有用。这是一个错误吗？

#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

这实际上是一个悄悄进入最近的0.4.0版本但在几天前修复的错误。 {{options[i]}}值（因为它在{{#products:i}}部分内）应解析为products.0.options.0和products.0.options.1等等 - 而是解析为{{1} }和options.0。

有两种解决方案。一种是简单地使用options.1而不是{{this}} - 正确解析（see fiddle）。这假设在您的真实应用程序中（与此减少的测试用例相反），您可以做到这一点。

第二种是使用开发版本，其中包括修复：http://cdn.ractivejs.org/edge/ractive.js。

我们将在不久的将来尝试推出一个新的稳定版本。很抱歉给您带来不便！

Answer 2

根据w3规范值，只能是字符串值http://www.w3.org/TR/html-markup/input.radio.html#input.radio.attrs.value

但是，您可以将字符串用作对象的键。将您的数据更改为

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

然后将模板更改为

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

Ractive.js将对象设置为无线电输入值

#template

的javascript

2 个答案: