[英]Knockout and a toggle switch - data-bind
I am switching from javascript, to Knockout. 我正在从JavaScript切换到淘汰赛。 On my page, I use a BootStrap toggle switch.
在我的页面上,我使用BootStrap拨动开关。
http://www.bootstraptoggle.com/ http://www.bootstraptoggle.com/
Before, I would set a div as visible based on the value of the switch like this: 在此之前,我将基于开关的值将div设置为可见:
if($("#HasPromotion").bootstrapSwitch('state') == false)
{
$("#promotiondiv").hide();
}
And my control was defined as : 我的控制定义为:
@Html.CheckBoxFor(x => x.HasPromotion, new { @class = "toggleswitchcontrol", data_on_text = "Yes", data_off_text = "No" })
With knockout, I want to databind the value to a property on my viewmodel. 使用剔除,我想将值数据绑定到我的视图模型上的属性。
I am trying this: 我正在尝试:
<input type="checkbox" class="toggleswitchcontrol" data-on-text="Yes" data-off-text="Nope" data-bind="attr: {state: hasPromotion}" />
No success.... I'm not sure what property to bind. 没有成功...。我不确定要绑定的属性。 How can I bind the control to that property in my view model?
如何将控件绑定到视图模型中的该属性?
sorry did not realize you were using a different boostrap switch than the one in my comment. 很抱歉,您没有意识到您使用的是与我的评论不同的Boostrap开关。 I updated the fiddle to add a custom binding for boostraptoggle.
我更新了小提琴,为boostraptoggle添加了自定义绑定。
http://jsfiddle.net/MBLP9/356/ http://jsfiddle.net/MBLP9/356/
here is the binding. 这是绑定。
ko.bindingHandlers.bootstrapToggleOn = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
$elem = $(element);
$(element).bootstrapToggle();
if (ko.utils.unwrapObservable(valueAccessor())){
$elem.bootstrapToggle('on')
}else{
$elem.bootstrapToggle('off')
}
$elem.change(function() {
if ($(this).prop('checked')){
valueAccessor()(true);
}else{
valueAccessor()(false);
}
})
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var vStatus = $(element).prop('checked');
var vmStatus = ko.utils.unwrapObservable(valueAccessor());
if (vStatus != vmStatus) {
$(element).bootstrapToggle('toggle')
}
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.