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

Question

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

我有 3 个 bootstrap 个单选按钮

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

结果是尽管单击了不同的单选按钮，单选值始终为 cherry。

代码如下： http://jsfiddle.net/pagowdho/1/

Answer 1

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

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

问题是 Bootstrap 处理 click event 并防止它冒泡，所以 knockout 无法更新绑定。
您有多种方法可以避免这种情况：

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

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

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 单选按钮值失败

binding a Knockout observable property to a bootstrap radio button value fails

javascript

data-binding

radio-button

twitter-bootstrap

knockout.js

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

binding a Knockout observable property to a bootstrap radio button value fails

javascript

data-binding

radio-button

twitter-bootstrap

knockout.js

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