Mvvm 使用Twitter引导按钮组作为单选按钮，并进行敲除绑定

这是有效的：

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>

正如预期的那样，当您选择第二个无线电时，优先级observable的值将更改为“需要”。但是，我想使用Twitter引导按钮组作为收音机。这是我的HTML，但它并没有像预期的那样改变可观察的内容：

<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：“priority1”是标准的单选按钮，“priority2”是引导按钮。

仅适用于复选框（

）或单选按钮（

）等“可检查”控件

但是在第二个示例中，您有

按钮

，其中引导只模拟单选按钮组的外观，因此

选中的

绑定不起作用

但是，您可以使用将值传递给可观察对象的位置：

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

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

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

我想
我需要

---

演示

问题是您使用的是

已选中的

与按钮绑定，这是不允许的，您可以使用单击绑定。检查这把小提琴：

更新：

是的，您可以通过使用ko

css绑定来实现这一点。检查此更新的小提琴：

这很有效，只是当我更改模型时，它不会更新视图。也就是说，实用地设置优先级2（“想要”）并没有选择适当的按钮。这容易做到吗？@ScottBeeson请检查我的更新答案，并让我知道这是您想要的吗？@gaurav是否可以将
数据绑定
属性的内容移动到js文件中？如果可能，它会是什么样子？@Skytiger为什么要将数据绑定属性移动到js文件？数据绑定的主要目的是将数据模型与视图模型绑定。如果您试图将数据绑定与动态元素结合使用，则可以将绑定应用于新创建的元素，如
ko.applyBindings（您的模型，document.getElementById（'newElementId'）好东西！我修改了提琴，以演示如何将对模型的编程更改反映回按钮组：（我还修改了JS代码以使用
==
，并添加了几个缺少的分号）这也可以工作，尽管它比gaurav的答案复杂得多，但它也有同样的问题。这不是双向绑定。如果我设置priority（'want'）和priority2（'want'），您将看到收音机是自动选择的，但引导按钮不是。如果您还想进行双向绑定，则需要将
单击
与
css
绑定相结合。My
valueClick
自定义bindinghandler也可以扩展以处理这种情况。起初，它可能看起来很复杂，但它是一个更易于维护的解决方案。因为在你接受的答案中，你必须在按钮上重复“想要”和“需要”3次，“优先2”2次。另一方面，使用自定义绑定，您需要一次性编写所有内容。@nemesv duuuude您的解决方案非常适合我的需要。谢谢，我需要扩展
valueClick
的功能来处理双向绑定，就像你说的那样，但到目前为止它是完美的。@nemesv你的例子在两个方面帮助了我；它解决了相同的按钮组问题，并向我展示了我不需要视图模型上的“切换”功能。因为可观察对象是函数，所以您只需在绑定单击事件中传递一个新值。干杯
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>