使用 Twitter Bootstrap 按钮组作为带有敲除绑定的单选框

Question

这是有效的：

view.html

<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="want" style="margin-top: -3px; margin-right: 3px;" />I want to</div>
<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="need"  style="margin-top: -3px; margin-right: 3px;"/>I need to</div>

controller.js

function feedbackViewModel() {
    var self = this;
    self.priority = ko.observable("want");
    //lots of other stuff
}

正如预期的那样，当您选择第二个收音机时，priority observable 的值将变为“需要”。但是，我想将 Twitter Bootstrap 按钮组用作收音机。这是我拥有的 HTML，但它并没有像预期的那样改变 observable：

<span class="btn-group" data-toggle="buttons-radio">
    <button data-bind="checked: priority" type="button" class="btn" value="want">I want to</button>
    <button data-bind="checked: priority" type="button" class="btn" value="need">I need to</button>
</span>

更新我在这里有一个 jsfiddle：http://jsfiddle.net/a8wa8/6/“priority1”是标准单选选择，“priority2”是引导按钮。

Answer 1

问题是您正在使用Checked 绑定按钮，这是不允许的，您可以使用点击绑定。检查这个小提琴：

http://jsfiddle.net/a8wa8/7/

更新：

是的，您可以通过使用 ko css binding 来实现这一点。检查这个更新的小提琴：

Updated Fiddle

Answer 2

checked binding 仅适用于“可检查”控件，例如复选框 (<input type='checkbox'>) 或单选按钮 (<input type='radio'>)。

但您在第二个示例中有 button，其中引导程序只是模拟单选按钮组的外观，因此 checked 绑定不起作用。

但是，您可以使用 click binding 将值传递给您的 observable：

<span class="btn-group" data-toggle="buttons-radio">
     <button data-bind="click: function() { priority2('want') }" 
             type="button" class="btn" value="want">I want to</button>
     <button data-bind="click: function() { priority2('need') }" 
             type="button" class="btn" value="need">I need to</button>    
</span>

您可以将其隐藏在自定义绑定后面：

ko.bindingHandlers.valueClick = {
    init: function(element, valueAccessor, allBindingsAccessor, 
                  viewModel, bindingContext) {     
        var value = valueAccessor();
        var newValueAccessor = function() {
            return function() {
                value(element.value); 
            };
        };
        ko.bindingHandlers.click.init(element, newValueAccessor, 
            allBindingsAccessor, viewModel, bindingContext);
    },
}

然后你可以像这样使用它：

<span class="btn-group" data-toggle="buttons-radio">
     <button data-bind="valueClick: priority2" 
             type="button" class="btn" value="want">I want to</button>
     <button data-bind="valueClick: priority2" 
             type="button" class="btn" value="need">I need to</button>    
</span>

演示JSFiddle.