Knockout复选框更改事件发送旧值
我对knockout "checked“绑定有问题。在更新之前，复选框中的"change“事件似乎会返回旧值(因此，如果未选中它，它将返回false)。我不认为我可以订阅这个值，因为我把它放在object中。
<tbody data-bind="foreach: Categories">
<tr>
<td><input type="checkbox" data-bind="checked: ShowOpened, event: { change: $root.CategoryChange }" /></td>
</tr>
</tbody>
<script type="text/javascript">
var Category = function (Id, Name, Order, ShowOpened) {
this.Id = Id;
this.Name = Name;
this.Order = Order;
this.ShowOpened = ShowOpened;
this.IsUpdated = ko.observable(false);
this.OldOrder = Order;
this.OldShowOpened = ShowOpened;
};
var ViewModel = {
Categories: ko.observableArray([]),
CategoryChange: function(pCategory) {
if(pCategory.Order != pCategory.OldOrder || pCategory.ShowOpened != pCategory.OldShowOpened)
pCategory.IsUpdated(true);
else
pCategory.IsUpdated(false);
}
};
ko.applyBindings(ViewModel);
</script>所以在这个例子中，我有一个ShowOpened复选框，它可以触发CategoryChange方法，该方法将更改对象中的变量(稍后我需要知道哪些对象被更新)。但是，当chechbox改变时，它总是发出旧值，触发方法，然后改变值。有没有办法解决这个问题？
回答 3
Stack Overflow用户
发布于 2012-07-02 23:10:38
既然您坚持说缺少ko.observables不是问题，我就仔细研究一下。看起来，你是对的！在设置实际值之前触发change事件。恐怕我不知道是什么原因。
但有一个简单的方法可以解决这个问题:只需将change事件更改为click事件：
<input type="checkbox" data-bind="checked: ShowOpened, click: $root.CategoryChange" />记住，您必须显式地将return true;放在click事件处理程序的末尾。否则，新值将不会设置为checkbox。
如果你不想使用click事件，那么你可以用另一种方法。订阅ShowOpened的更改
this.ShowOpened = ko.observable(ShowOpened);
this.ShowOpened.subscribe(function(newValue) {
/* Do something when ShowOpened changes.
newValue variable holds the new value, obviously. :) */
});Stack Overflow用户
发布于 2012-07-02 22:37:55
尝试使用subscribe而不是事件绑定。这现在应该可以工作了
<table>
<tbody data-bind="foreach: Categories">
<tr>
<td><input type="checkbox" data-bind="checked: ShowOpened" /></td>
</tr>
</tbody>
<table>
var Category = function (Id, Name, Order, ShowOpened) {
this.Id = Id;
this.Name = Name;
this.Order = Order;
this.ShowOpened = ko.observable(ShowOpened);
this.IsUpdated = false;
this.OldOrder = Order;
this.OldShowOpened = ShowOpened;
this.ShowOpened.subscribe(function (newShowOpened) {
if(this.Order != this.OldOrder || this.ShowOpened() != this.OldShowOpened)
this.IsUpdated = true;
else
this.IsUpdated = false;
}, this);
};
var ViewModel = {
Categories: ko.observableArray([])
};
ko.applyBindings(ViewModel);或者，作为替代方案(在我看来是更好的解决方案)，您可以使用现在称为computed的dependentObservable。下面是它看起来的样子
<table>
<tbody data-bind="foreach: Categories">
<tr>
<td>
<input type="checkbox" data-bind="checked: ShowOpened" />
<span data-bind="text: IsUpdated"></span>
</td>
</tr>
</tbody>
</table>
var Category = function (Id, Name, Order, ShowOpened) {
this.Id = Id;
this.Name = Name;
this.Order = Order;
this.ShowOpened = ko.observable(ShowOpened);
this.OldOrder = Order;
this.OldShowOpened = ShowOpened;
this.IsUpdated = ko.computed(function () {
return this.Order != this.OldOrder || this.ShowOpened() != this.OldShowOpened;
}, this);
};
var ViewModel = {
Categories: ko.observableArray([])
};
ko.applyBindings(ViewModel);Stack Overflow用户
发布于 2017-01-11 19:05:30
我也遇到了这个问题，但是我不能使用订阅解决方案，因为我已经用一个可以重置该值的ajax请求订阅了相同的字段。然后，当您更改代码时，它将停留在循环中。因此，我添加了以下变通方法(虽然很难看，但却很好用)。
$("input[type='radio'], input[type='checkbox']", element).on("change", function (e, data) {
setTimeout(function () {
$(this).trigger("afterChange", data);
}.bind(this), 10);
}); 然后，在监听更改时，我将监听afterChange事件。
<div data-bind="foreach: answerList">
<input type="checkbox" data-bind="event: { afterChange: $root.sendSelectedAnswer($data) }"/>
</div>我知道这不是最好的解决方案，但在我的情况下，我别无选择。
https://stackoverflow.com/questions/11294992
复制相似问题
腾讯云开发者
