将 Knockout 可观察属性绑定到引导单选按钮值失败答案

【问题标题】：binding a Knockout observable property to a bootstrap radio button value fails将 Knockout 可观察属性绑定到引导单选按钮值失败
【发布时间】：2016-02-29 06:48:37
【问题描述】：

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

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

【问题讨论】：

标签： javascript twitter-bootstrap knockout.js data-binding radio-button

【解决方案1】：

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

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

问题在于 Bootstrap 会处理 click event 并防止它冒泡，因此敲除无法更新绑定。
您有多种方法可以规避这种情况：

1)
删除data-toggle="buttons"。 JsFiddle

2)
使用自定义敲除绑定，如this 答案中所述。

3)
使用事件处理程序自己更新值。 JsFiddle

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

【讨论】：

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

【讨论】：