具有多个值的Ractive双向绑定

Question

我有多行无线电输入。用户必须从每行中选择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中做到这一点？

感谢。

Answer 1

当您对无线电输入使用双向绑定时，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

Answer 2

我认为这会做你想要的（虽然我对你的数据模型并不完全确定）：

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

Answer 3

Per @martypdx's answer，您只需要将输入关联/绑定到它所代表的属性，但诀窍是为了使输入值与属性值匹配（@martin-kolarik meant）< em>当值是布尔值时，你需要用把手包裹它（比如@martypdx）。

当然，如果您正在尝试创建一个可POST的表单（因为您希望name显示为输入名称），这将是不正确的，因为Ractive将命名输入来自上下文/的keyPath。

更新了小提琴 - 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>

Ractive

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

    }
})