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

正如预期的那样,当您选择第二个无线电时,优先级可观察值将变为"需要".但是,我想使用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.检查这个更新的小提琴:

更新小提琴

Answer 2

的检查结合仅适用于"可检验"像复选框(对照<input type='checkbox'>)或单选按钮(<input type='radio'>).

但是button在第二个示例中,bootstrap只是模拟单选按钮组的外观,因此checked绑定不起作用.

但是,您可以使用将值传递给observable 的click绑定:

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