Ractive двусторонняя привязка с несколькими значениями

У меня есть несколько рядов радио входов. Пользователь должен выбрать fixed или percentage из каждой строки. то есть

введите здесь описание изображения

Я не могу найти лучшего определения в ractive документации.

когда мой js имеет {name: 'foo', checked: true}

И мой шаблон имеет

<input type="radio" name="{{name}}" value="fixed" checked="{{checked}}">Fixed

Я не могу сделать это в ractive, как говорится

A radio input can have two-way binding on its name attribute, or its checked attribute - not both

Есть ли где-нибудь документация, которая, как вы знаете, может помочь мне использовать несколько значений в элементе ввода.

Или как я могу сделать это в ractive?

Спасибо.


javascript jquery ractivejs
person mmrs151    schedule 18.09.2014    source источник
comment
Входные данные radio используются для указания того, какое из нескольких значений должно быть присвоено одному свойству. Ваш пример сбивает с толку тем, что он больше похож на флажок, одно значение которого либо истинно, либо ложно. Можете ли вы расширить свой пример, включив в него второй вариант данных?   -  person martypdx    schedule 18.09.2014
comment
Готово. Загрузил картинку, думаю будет понятнее.   -  person mmrs151    schedule 18.09.2014
comment
У вас есть контроль над форматом данных? Если нет, то похоже на { name: 'fixed', checked: true }, { name: 'percent', checked: false}? Или это просто { name: 'fixed', checked: true } или { name: 'fixed', checked: false }?   -  person martypdx    schedule 18.09.2014
comment
Я использую ractive.push(). Итак, для каждой строки у меня есть { name: 'fixed', checked: true }, где name может быть либо fixed, либо percentage, а checked может быть либо истинным, либо ложным.   -  person mmrs151    schedule 18.09.2014
comment
Что происходит, когда у вас есть такая строка, как { name: 'fixed', checked: false }? В этом случае оба входа не проверены?   -  person Martin Kolárik    schedule 18.09.2014

Ответы (3)


arrow_upward
1
arrow_downward

Когда вы используете двустороннюю привязку с радиовходами, Ractive автоматически проверит тот, который имеет то же значение, что и связанная переменная (в вашем случае 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'
    }
});

Учебное пособие: http://learn.ractivejs.org/two-way-binding/1

person Martin Kolárik    schedule 18.09.2014
comment
Это решение не работает для меня, пожалуйста, обратитесь к изображению, которое я только что загрузил. - person mmrs151; 18.09.2014
comment
Я действительно решил это из вашего ответа. Я читаю последние радиоэлементы: проверенное значение и передаю его как имя следующему. то есть var name = $(".selector:checked").last().val(); и {elementName: name}. Спасибо :). Надеюсь увидеть какое-то голосование. - person mmrs151; 18.09.2014

arrow_upward
0
arrow_downward

Я думаю, что это будет делать то, что вы хотите (хотя я не совсем уверен в вашей модели данных):

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

куда

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

См. http://jsfiddle.net/9jan1j7q/.

person martypdx    schedule 18.09.2014

arrow_upward
0
arrow_downward

Согласно @martypdx answer, вам нужно только связать/связать ввод со свойством, которое он представляет, но хитрость заключалась в том, что в чтобы входное значение соответствовало значению свойства (что имел в виду @martin-kolarik), когда значение является boolean заключается в том, что вам нужно обернуть его рулем (как это сделал @martypdx).

Конечно, если вы пытаетесь создать форму с поддержкой POST (поскольку вы хотите, чтобы name отображалось как имя ввода), это будет неправильно, потому что Ractive будет называть ввод из контекста/клавишного пути.

Обновленная скрипта -- http://jsfiddle.net/drzaus/9jan1j7q/1/

Шаблон

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

Раактив

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); }

    }
})
person drzaus    schedule 18.12.2014