8

这是有效的：

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

控制器.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”是引导按钮。

4

2 回答 2

9

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

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

更新：

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

更新小提琴

于 2013-04-03T16:13:50.190 回答
6

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

但是您button在第二个示例中，引导程序只是模拟单选按钮组的外观，因此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。

于 2013-04-03T16:12:53.740 回答