Ractive.js устанавливает объект как значение радиовхода

Можно ли установить объект в качестве значения радиовхода?

Он попробовал это http://jsfiddle.net/benroe/fah5f/3/, но это не работает. Это ошибка?

#шаблон

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

});

javascript ractivejs
person BenRoe    schedule 23.04.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

На самом деле это ошибка, которая прокралась в последний выпуск 0.4.0, но была исправлена ​​пару дней назад. Значение {{options[i]}}, которое (поскольку оно находится внутри секции {{#products:i}}) должно разрешаться как products.0.options.0 и products.0.options.1 и т. д., вместо этого разрешается как options.0 и options.1.

Есть два решения. Один из них — просто использовать {{this}} вместо {{options[i]}} — это правильно (см. fiddle). Это предполагает, что в вашем реальном приложении (в отличие от этого сокращенного тестового примера) вы можете это сделать.

Второй — использовать версию для разработки, которая включает исправление: http://cdn.ractivejs.org/edge/ractive.js.

Мы постараемся выпустить новую стабильную версию в ближайшем будущем. Извините за беспокойство!

person Rich Harris    schedule 24.04.2014

arrow_upward
0
arrow_downward

В соответствии со спецификацией 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>
person Mark Meyer    schedule 23.04.2014
comment
вы правы, что значения могут быть только строками в HTML; в Ractive вы также можете использовать объекты в качестве значений. Боюсь, это была просто старая добрая ошибка! - person Rich Harris; 24.04.2014