是否可以将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());
});
结果是,尽管点击了不同的单选按钮,但无线电值始终是樱桃。
答案 0 :(得分:2)
当您将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); } }
答案 1 :(得分:1)
您可以使用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/