[英]KnockoutJS checked binding issue
I am relatively new to knockoutjs, but I seem to be having a problem with an observableArray of checkboxes, the checkboxes have some observable properties for checked, and disabled. 我对敲除js还是比较陌生,但是我似乎对observableArray的复选框有问题,这些复选框具有一些可观察的属性以供选中和禁用。
Using knockout I can check and uncheck the box, but it seems that once I interact with the checkbox manually (IE by clicking it with the mouse) the underlying data seems to be changing but I can't use knockout to check or uncheck the box anymore. 使用敲除功能,我可以选中和取消选中该框,但是似乎一旦我手动与复选框交互(即,通过用鼠标单击它),基础数据似乎就在变化,但是我无法使用敲除功能来选中或取消选中该框不再。
HTML 的HTML
<div id="filterByPrice" data-bind="foreach: priceFilters">
<div>
<input type="checkbox" data-bind="attr: {id: $index, value: value, checked: checked, disable: disabled}" />
<span data-bind="text: label"></span>
</div>
</div>
Javascript Java脚本
function FilterBy(name, value, label) {
this.name = name;
this.value = value;
this.label = label;
this.disabled = ko.observable(false);
this.checked = ko.observable(false);
}
$(function () {
var viewModel = {
priceFilters: ko.observableArray([
new FilterBy("price0", "0", "All Prices")])
};
ko.applyBindings(viewModel);
});
http://jsfiddle.net/paulwilliams0/EYEz2/ http://jsfiddle.net/paulwilliams0/EYEz2/
Is there something that I am doing that is wrong? 我在做某事是错的吗? Not only am I new to knockout, but I am new to MVVM in general.
我不仅是淘汰赛的新手,而且还是MVVM的新手。 Thanks a lot
非常感谢
here i have a working version of your example: 在这里,我有您的示例的工作版本:
http://jsfiddle.net/infantrash/hVac2/2/ http://jsfiddle.net/infantrash/hVac2/2/
data-bind attribute for your checkbox: use the build-in binding handlers, attr: { id: $index } is ok, but value, checked and disable are should not be in the curly brackets. 复选框的data-bind属性:使用内置的绑定处理程序,attr:{id:$ index}可以,但是value,checked和disable不应放在大括号中。
use knockout functions for your functionality instead of mixing jQuery into it. 为您的功能使用剔除功能,而不是将jQuery混入其中。
function viewModel(){ var self = this; self.priceFilters = ko.observableArray([ new FilterBy("price0", "0", "All Prices"), new FilterBy("price1", "1", "1st Price") ]); self.checkAllPrices = function(){ ko.utils.arrayForEach(self.priceFilters(), function(item){ item.checked(true); }) }; self.unCheckAllPrices = function(){ ko.utils.arrayForEach(self.priceFilters(), function(item){ item.checked(false); }) };
} }
i changed the viewModel to a function instead of using the object literal notation, but that's just my preferred way, you can use the object literal notation if you want. 我将viewModel更改为函数,而不是使用对象文字符号,但这只是我的首选方式,如果需要,您可以使用对象文字符号。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.