相关:Bootstrap Radio Button Group
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" value="1" data-bind="checked: optionsValue"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" value="2" data-bind="checked: optionsValue"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" value="3" data-bind="checked: optionsValue"> Option 3
</label>
</div>
<br />
<span data-bind="text: optionsValue"></span>
Javascript:
var ViewModel = function() {
this.optionsValue = ko.observable()
};
ko.applyBindings(new ViewModel());
JsFiddle:
- 没有数据切换:http://jsfiddle.net/fDMM2/
- 使用数据切换:http://jsfiddle.net/Kf3tj/1/
我有上面的代码,我正在尝试按预期工作。问题是当 data-toggle="buttons"
被添加到 btn-group div(如 Bootstrap 3 example 中)时,knockout 绑定(bind)停止工作。如果我将数据切换从按钮组中移除,那么绑定(bind)将按预期工作,但按钮组看起来很糟糕。我知道这在 Bootstrap 2 中不起作用,因为他们实际上并没有将 radio 输入用于他们的 radio 样式。为什么它现在拒绝工作,即使他们工作?
最佳答案
bootstrap buttons和 knockout checked
绑定(bind)仍然不能很好地发挥作用:
- knockout 使用
checked
绑定(bind)中的click
事件触发底层可观察对象发生变化 - bootstrap 订阅点击事件以进行切换,但会调用
e.preventDefault()
,因此 KO 不会收到有关点击的通知。
一个可能的解决方案是创建一个自定义绑定(bind)处理程序,您可以在其中订阅 change
事件(这是由 toogle 上的 Bootstrap 触发的)并在那里设置您的可观察值:
ko.bindingHandlers.bsChecked = {
init: function (element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
var value = valueAccessor();
var newValueAccessor = function () {
return {
change: function () {
value(element.value);
}
}
};
ko.bindingHandlers.event.init(element, newValueAccessor,
allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
if ($(element).val() == ko.unwrap(valueAccessor())) {
setTimeout(function () {
$(element).closest('.btn').button('toggle');
}, 1);
}
}
}
并在您的 View 中使用它:
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" value="1"
data-bind="bsChecked: optionsValue"> Option 1
</label>
使用 Bootstrap 3.0.2 的原始演示 JSFiddle .
使用 Bootstrap 3.2.0 更新了演示 JSFiddle .
关于javascript - Knockout + Bootstrap 3 单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20077475/