Knockout + Bootstrap 3单选按钮

Question

相关:Bootstrap单选按钮组

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示例中),敲除绑定停止工作.如果我将数据切换关闭按钮组,则绑定按预期工作,但按钮组看起来很糟糕.我知道这在Bootstrap 2中不起作用,因为他们实际上没有使用无线电输入来进行无线电造型.它怎么会拒绝现在工作,即使他们这样做？

Answer 1

在引导按钮和淘汰赛checked结合仍然没有踢得好看:

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

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

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); 
        }
    }
}

并在您的视图中使用它:

<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更新了演示.

Answer 2

我不能相信这一点,因为一旦我的同事提出它,但它的效果非常好.

<div class="btn-group" data-toggle="buttons">
    <label data-bind="css: { active: !HideInLeaderboards() }, 
                      click: function () { HideInLeaderboards(false); },
                      clickBubble: false" 
                      class="btn btn-default">
        Show Name
    </label>
    <label data-bind="css: { active: HideInLeaderboards() },
                      click: function () { HideInLeaderboards(true); },
                      clickBubble: false" class="btn btn-default">
        Hide Name
    </label>
</div>