javascript - 具有多个值的 Ractive 双向绑定

Question

我有多行无线电输入。用户必须从每一行中选择一个fixed或percentage从每一行中选择一个。IE

我在 ractive 文档中找不到最佳定义。

当我的 js 有 {name: 'foo', checked: true}

我的模板有

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

正如它所说的那样，我不能这样做

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

根据@martypdx 的回答，您只需要将输入关联/绑定到它所代表的属性，但诀窍是当值是布尔值时，为了使输入值与属性值匹配（ @martin-kolarik 的意思）是您需要用车把包裹它（就像@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); }

    }
})