Knockout + Bootstrap 3个单选按钮 [英] Knockout + Bootstrap 3 Radio Buttons

问题描述

相关： Bootstrap Radio Button Group

HTML：

 < div class =btn-groupdata-toggle =buttons> 
< label class =btn btn-primary> 
< input type =radioname =optionsid =option1value =1data-bind =checked：optionsValue>选项1 
< / label> 
< label class =btn btn-primary> 
< input type =radioname =optionsid =option2value =2data-bind =checked：optionsValue>选项2 
< / label> 
< label class =btn btn-primary> 
< input type =radioname =optionsid =option3value =3data-bind =checked：optionsValue>选项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示例）淘汰赛的绑定停止工作。如果我离开按钮组的数据切换，那么绑定按预期工作，但按钮组看起来很糟糕。我知道这在Bootstrap 2中不起作用，因为它们实际上并没有使用收音机输入来进行收音机造型。它是如何拒绝现在工作，即使他们这样做？ bootstrap按钮和淘汰赛 checked 绑定仍然不会很好：

• 淘汰赛使用点击在内检查绑定事件来调整底层的observable以改变


• bootstrap订阅在点击事件中进行切换，但调用 e.preventDefault（），所以KO不会被通知点击。

一种可能的解决方案是创建一个自定义绑定处理程序，您可以订阅 change 事件（这是通过引导启动的），并设置你的observables值：

  ko.bindingHandlers.bsChecked = {
 init：function（element， eAccessor，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，$ b $ viewModel，bindingContext）{
 if（$（element）.val（）== ko.unwrap（valueAccessor （））{
 setTimeout（function（）{
 $（element）.closest（'。btn'）。button（'toggle'）; 
}，1）; 
 
 
 
 code 
 $ b 
并在你的视图中使用它with： 
 
 
 < label class =btn btn-primary> 
< input type =radioname =optionsid =option1value =1
 data-bind =bsChecked：optionsValue>选项1 
< / label> 
  
原始演示使用 Bootstrap 3.0.2   JSFiddle 。
使用 Bootstrap 3.2.0   JSFiddle 。
 
Related to: 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:


Without data-toggle: http://jsfiddle.net/fDMM2/
With data-toggle: http://jsfiddle.net/Kf3tj/1/




I have the above code which I'm trying to get working as I expect it to. The problem is that when data-toggle="buttons" is added to the btn-group div (as in the Bootstrap 3 example) the knockout binding stops working. If I leave the data-toggle off of the buttons group then the binding works as expected but the button group looks awful. I know that this didn't work in Bootstrap 2 because they didn't actually use the radio input for their radio styling. How come it refuses to work now even though they do?
解决方案
The bootstrap buttons and the knockout checked binding are still not playing nice:


knockout uses the click event inside the  checked binding to tigger the underlaying observable to change
bootstrap subscribes on the click event to do the toggling but calls e.preventDefault() so KO won't be notified about the click.


One possible solution is to create a custom binding handler where you subscribe on the change event (this is fired by bootstrap on toogle) and set your observables value there:
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); 
        }
    }
}
And use it in your view with:
<label class="btn btn-primary">
    <input type="radio" name="options" id="option1" value="1" 
           data-bind="bsChecked: optionsValue"> Option 1
</label>
Original demo using Bootstrap 3.0.2 JSFiddle.

Updated demo using Bootstrap 3.2.0 JSFiddle.

                        
这篇关于Knockout + Bootstrap 3个单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！