淘汰赛 + Bootstrap 3 单选按钮 [英] Knockout + Bootstrap 3 Radio Buttons

问题描述

相关:引导单选按钮组

HTML:

<label class="btn btn-primary"><input type="radio" name="options" id="option1" value="1" data-bind="checked: optionsValue">选项1<label class="btn btn-primary"><input type="radio" name="options" id="option2" value="2" data-bind="checked: optionsValue">选项 2<label class="btn btn-primary"><input type="radio" name="options" id="option3" value="3" data-bind="checked: optionsValue">选项 3
<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 中不起作用，因为他们实际上并没有将收音机输入用于收音机样式.为什么现在它拒绝工作，即使他们这样做了?

解决方案

引导按钮和knockout checked 绑定仍然不够好:

• knockout 使用 checked 绑定中的 click 事件来触发底层 observable 进行更改
• bootstrap 订阅点击事件以进行切换，但调用 e.preventDefault()，因此 KO 不会收到有关点击的通知.

一种可能的解决方案是创建一个自定义绑定处理程序，您可以在其中订阅 change 事件(这是由引导程序在 toogle 上触发的)并在那里设置您的 observables 值:

ko.bindingHandlers.bsChecked = {init:函数(元素，valueAccessor，allBindingsAccessor，视图模型，绑定上下文){var value = valueAccessor();var newValueAccessor = 函数 () {返回 {改变:函数(){价值(元素.价值)；}}};ko.bindingHandlers.event.init(element, newValueAccessor,allBindingsAccessor, viewModel, bindingContext);},更新:函数(元素，valueAccessor，allBindingsAccessor，视图模型，绑定上下文){if ($(element).val() == ko.unwrap(valueAccessor())) {设置超时(函数(){$(element).closest('.btn').button('toggle');}, 1);}}}

并在您的视图中使用它:

<input type="radio" name="options" id="option1" value="1"数据绑定=bsChecked:optionsValue">选项1

使用 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.

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