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来实现此目的。检查这个更新的小提琴：

Updated Fiddle

Answer 2

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

但是你的第二个例子中有button，其中bootstrap只是模拟了单选按钮组的外观，因此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.

使用Twitter Bootstrap按钮组作为带有敲除绑定的无线电选择

2 个答案: