javascript - Knockout + Bootstrap 3 单选按钮

Question

相关: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 样式。尽管它们可以工作，但为什么现在却拒绝工作？

Answer 1

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 .