具有多个值的 Ractive 双向绑定答案

【问题标题】：Ractive two way binding with multiple values具有多个值的 Ractive 双向绑定
【发布时间】：2014-09-18 11:34:32
【问题描述】：

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

我在 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 中做到这一点？

谢谢。

【问题讨论】：

radio 输入用于指定应将多个值中的哪一个分配给单个属性。您的示例令人困惑，因为它看起来更像是一个复选框，一个值为真或假的值。您能否扩展您的示例以包含第二个数据选项？
完成。上传了图片，我觉得会更容易理解。
您可以控制数据格式吗？如果不是，是不是像{ name: 'fixed', checked: true }, { name: 'percent', checked: false}？还是只是{ name: 'fixed', checked: true } 或{ name: 'fixed', checked: false }？
我正在使用ractive.push()。因此，对于每一行，我都有{ name: 'fixed', checked: true }，其中name 可以是fixed 或percentage，checked 可以是真/假。
当你有像{ name: 'fixed', checked: false } 这样的一行时会发生什么？在这种情况下，两个输入都未选中吗？

标签： javascript jquery ractivejs

【解决方案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

【讨论】：

这个方案对我不起作用，请参考我刚刚上传的图片。
我实际上从您的回答中解决了它。我正在阅读最后一个单选元素 :checked 值并将其作为名称传递给下一个元素。即var name = $(".selector:checked").last().val(); 和{elementName: name}。谢谢：）。希望看到一些支持。

【解决方案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/

【讨论】：

【解决方案3】：

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

    }
})

【讨论】：