Question

是否可以将Knockout observable属性绑定到单选按钮值？

我有3个引导单选按钮

<div class="tgl-btns-group" data-toggle="buttons">
    <label class="btn tgl-btn active">
        <input type="radio" name="flavors" value="cherry" autocomplete="off" data-bind="checked: spamFlavors" />Cherry</label>
    <label class="btn tgl-btn">
        <input type="radio" name="flavors" value="almond" autocomplete="off" data-bind="checked: spamFlavors" />Almond</label>
    <label class="btn tgl-btn">
        <input type="radio" name="flavors" value="msg" autocomplete="off" data-bind="checked: spamFlavors" />Monosodium Glutamate</label>
</div>
Radio value: <span data-bind='text: check'></span>

我的淘汰模型如下

var Model = function () {
    var self = this;
    self.spamFlavors = ko.observable('cherry');
    self.check = self.spamFlavors();
};

$(document).ready(function () {
    ko.applyBindings(new Model());
});

结果是，尽管点击了不同的单选按钮，但无线电值始终是樱桃。

这里是代码： http://jsfiddle.net/pagowdho/1/

Answer 1

当您将check的值设置为spamFlavors()时，您基本上将其设置为初始值，即'cherry'。所以它不再是一个可观察的，也不会在变化时更新您应该将span绑定到spamFlavors，然后（理论上）更新更新。

Radio value: <span data-bind='text: spamFlavors'></span>

问题是Bootstrap会处理click event并阻止它冒泡，因此淘汰赛无法更新绑定。
你有多种方法来规避：

<强> 1）
删除data-toggle="buttons"。 JsFiddle

<强> 2）
使用自定义敲除绑定，如this answer。

中所述

第3）
使用事件处理程序自行更新值。 JsFiddle

event: { change: function(d, e) { spamFlavors(e.target.value); } }

Answer 2

您可以使用this敲除绑定来使用bootstrap.js单选按钮组控件。您必须包含绑定，然后将您的html修改为

<div class="tgl-btns-group" data-toggle="buttons" data-bind="radio: spamFlavors">
    <label class="btn tgl-btn active">
        <input type="radio" name="flavors" value="cherry" autocomplete="off"  />Cherry</label>
    <label class="btn tgl-btn">
        <input type="radio" name="flavors" value="almond" autocomplete="off"  />Almond</label>
    <label class="btn tgl-btn">
        <input type="radio" name="flavors" value="msg" autocomplete="off" />Monosodium Glutamate</label>
</div>
Radio value: <span data-bind='text: spamFlavors'></span>

JsFiddle在这里：http://jsfiddle.net/newuserjs/pagowdho/7/

将Knockout observable属性绑定到bootstrap单选按钮值失败

2 个答案: