Javascript 淘汰+引导3个单选按钮
有关: HTML: JsFiddle: 无数据切换: 使用数据切换: 我有上面的代码,我正试图让工作,因为我期望它。问题是,当数据切换=按钮添加到btn组div中时,如中所示,淘汰绑定停止工作。如果我关闭按钮组的数据切换,那么绑定会按预期工作,但按钮组看起来很糟糕。我知道这在Bootstrap 2中不起作用,因为他们实际上没有使用收音机输入来设计收音机样式。为什么它现在拒绝工作,即使他们这样做了?和绑定仍然不好: 敲除使用选中绑定中的单击事件来跳转要更改的参考底图 bootstrap订阅click事件以进行切换,但调用e.preventDefault,因此不会通知KO单击。 一种可能的解决方案是创建一个自定义绑定处理程序,您可以在其中订阅由toogle上的bootstrap触发的更改事件,并在其中设置您的observables值:Javascript 淘汰+引导3个单选按钮,javascript,html,twitter-bootstrap,knockout.js,twitter-bootstrap-3,Javascript,Html,Twitter Bootstrap,Knockout.js,Twitter Bootstrap 3,有关: HTML: JsFiddle: 无数据切换: 使用数据切换: 我有上面的代码,我正试图让工作,因为我期望它。问题是,当数据切换=按钮添加到btn组div中时,如中所示,淘汰绑定停止工作。如果我关闭按钮组的数据切换,那么绑定会按预期工作,但按钮组看起来很糟糕。我知道这在Bootstrap 2中不起作用,因为他们实际上没有使用收音机输入来设计收音机样式。为什么它现在拒绝工作,即使他们这样做了?和绑定仍然不好: 敲除使用选中绑定中的单击事件来跳转要更改的参考底图 bootstrap订阅clic
ko.bindingHandlers.bsChecked = {
init: function (element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
var value = valueAccessor();
var newValueAccessor = function () {
return {
change: function () {
value(element.value);
}
}
};
ko.bindingHandlers.event.init(element, newValueAccessor,
allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
if ($(element).val() == ko.unwrap(valueAccessor())) {
setTimeout(function () {
$(element).closest('.btn').button('toggle');
}, 1);
}
}
}
并在您的视图中使用它:
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" value="1"
data-bind="bsChecked: optionsValue"> Option 1
</label>
原始演示使用Bootstrap3.0.2。
使用Bootstrap 3.2.0更新了演示版。我不能相信这一点,因为有一次我的同事提出了它,但它运行得非常好
<div class="btn-group" data-toggle="buttons">
<label data-bind="css: { active: !HideInLeaderboards() },
click: function () { HideInLeaderboards(false); },
clickBubble: false"
class="btn btn-default">
Show Name
</label>
<label data-bind="css: { active: HideInLeaderboards() },
click: function () { HideInLeaderboards(true); },
clickBubble: false" class="btn btn-default">
Hide Name
</label>
</div>
将@nemesv建议的处理程序更改为:它在我的应用程序中运行良好
ko.bindingHandlers.bsChecked = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
var newValueAccessor = function () {
return {
change: function () {
value(element.value);
}
}
};
if ($(element).val() == ko.unwrap(valueAccessor())) {
$(element).closest('.btn').button('toggle');
}
ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
}
}
似乎是引导和淘汰之间的绑定,并且似乎保持了相当好的最新状态。具体而言,单选按钮使用以下代码:
// Knockout checked binding doesn't work with Bootstrap radio-buttons
ko.bindingHandlers.radio = {
init: function (element, valueAccessor) {
if (!ko.isObservable(valueAccessor())) {
throw new Error('radio binding should be used only with observable values');
}
$(element).on('change', 'input:radio', function (e) {
// we need to handle change event after bootsrap will handle its event
// to prevent incorrect changing of radio button styles
setTimeout(function() {
var radio = $(e.target),
value = valueAccessor(),
newValue = radio.val();
value(newValue);
}, 0);
});
},
update: function (element, valueAccessor) {
var $radioButton = $(element).find('input[value="' + ko.unwrap(valueAccessor()) + '"]'),
$radioButtonWrapper;
if ($radioButton.length) {
$radioButtonWrapper = $radioButton.parent();
$radioButtonWrapper.siblings().removeClass('active');
$radioButtonWrapper.addClass('active');
$radioButton.prop('checked', true);
} else {
$radioButtonWrapper = $(element).find('.active');
$radioButtonWrapper.removeClass('active');
$radioButtonWrapper.find('input').prop('checked', false);
}
}
};
有一种更容易找到的方法 我们不能使用数据切换属性,而尝试使用knockout的数据绑定实现相同的行为 它几乎和本地html收音机一样简单 var ViewModel=函数{ this.optionsValue=ko.observative1; }; ko.applybindingsnewviewmodel; 输入[类型=收音机]{ /*使本机收音机的行为与引导程序的收音机相同*/ 显示:无; } 选择1 选择2 选择3
这里有一个简单的解决方案,我很惊讶还没有提到 1从btn组中删除数据切换=按钮 现在淘汰赛应该开始了 2 Bootstrap为这些输入应用自定义css以隐藏它们,我们刚刚删除了数据切换,因此将以下css应用于无线电输入: 3我们需要的最后一件事是使所选选项的按钮具有活动类。将以下内容添加到标签按钮:
Bootstrap toogle按钮仍然不能很好地处理KO,因此您需要一个自定义绑定处理程序,如下所示:请注意,使用此代码的单选按钮组在Bootstrap 2.x中工作正常,尽管它们也在按钮内部显示单选按钮本身,除非您自己将其隐藏。这是因为Bootstrap 2.x代码没有试图拦截点击-它更喜欢模拟相同的行为。@Kittoes你应该问问它……哈哈,对不起,伙计。我只是想知道这背后是否有一些明显的原因,因为我对javascript这玩意儿还很陌生。你的回答很有效,很遗憾这样的事情是必要的。我很好奇,除了单选按钮外,人们如何在一个复选框中使用它。非常好的帖子!下面是复选框按钮组的一个修改:@Matus这里有类似的问题。数据正常,但BS和KO都会切换该值。添加&$元素。prop'checked'条件更新修复了甲烷储罐,这对于使用相同可观测值的多个链接切换非常有效!
ko.bindingHandlers.bsChecked = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
var newValueAccessor = function () {
return {
change: function () {
value(element.value);
}
}
};
if ($(element).val() == ko.unwrap(valueAccessor())) {
$(element).closest('.btn').button('toggle');
}
ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
}
}
// Knockout checked binding doesn't work with Bootstrap radio-buttons
ko.bindingHandlers.radio = {
init: function (element, valueAccessor) {
if (!ko.isObservable(valueAccessor())) {
throw new Error('radio binding should be used only with observable values');
}
$(element).on('change', 'input:radio', function (e) {
// we need to handle change event after bootsrap will handle its event
// to prevent incorrect changing of radio button styles
setTimeout(function() {
var radio = $(e.target),
value = valueAccessor(),
newValue = radio.val();
value(newValue);
}, 0);
});
},
update: function (element, valueAccessor) {
var $radioButton = $(element).find('input[value="' + ko.unwrap(valueAccessor()) + '"]'),
$radioButtonWrapper;
if ($radioButton.length) {
$radioButtonWrapper = $radioButton.parent();
$radioButtonWrapper.siblings().removeClass('active');
$radioButtonWrapper.addClass('active');
$radioButton.prop('checked', true);
} else {
$radioButtonWrapper = $(element).find('.active');
$radioButtonWrapper.removeClass('active');
$radioButtonWrapper.find('input').prop('checked', false);
}
}
};
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
data-bind="css: {active: optionsValue() == valueOfThisInput}"