twitter-bootstrap 使用 Twitter Bootstrap 按钮组作为带有淘汰绑定的单选选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15790524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use Twitter Bootstrap button group as radio select with knockout bindings
提问by Devil's Advocate
This is working:
这是有效的：
view.html
查看.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
控制器.js
function feedbackViewModel() {
var self = this;
self.priority = ko.observable("want");
//lots of other stuff
}
As expected, when you select the second radio the priority observable's value changes to "need". However, I'd like to use a Twitter Bootstrap button group as a radio. Here is the HTML I have, but it does not change the observable as expected:
正如预期的那样，当您选择第二个无线电时，优先级 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>
updateI have a jsfiddle going here: http://jsfiddle.net/a8wa8/6/"priority1" is the standard radio selects and "priority2" is the bootstrap buttons.
更新我有一个 jsfiddle 在这里：http: //jsfiddle.net/a8wa8/6/“priority1”是标准收音机选择，“priority2”是引导按钮。
回答by Gaurav
The issue is that you are using Checkedbinding with button which is not allowed, instead you can use click binding. check this fiddle:
问题是您使用的Checked是不允许的按钮绑定，而您可以使用单击绑定。检查这个小提琴：
Updated:
更新：
Yes you can achieve this by using ko css binding. Check this updated fiddle:
是的，您可以通过使用 ko 来实现这一点css binding。检查这个更新的小提琴：
回答by nemesv
The checked bindingonly works with "checkable" controls like checkbox (<input type='checkbox'>) or a radio button (<input type='radio'>).
在已检查的结合仅与“可检验”像复选框（对照工作<input type='checkbox'>）或单选按钮（<input type='radio'>）。
But you have buttonin your second example where bootstrap just emulates the look of the radio button group so the checkedbinding doesn't work.
但是button在第二个示例中，bootstrap 只是模拟单选按钮组的外观，因此checked绑定不起作用。
However you can use the clickbindingwhere you pass the value to your observable:
但是，您可以使用将值传递给 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>
And you can hide this behind a custom binding:
您可以将其隐藏在自定义绑定后面：
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);
},
}
Then you can use it like:
然后你可以像这样使用它：
<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>
Demo JSFiddle.
