我需要一个表绑定淘汰赛,和我想的表格单元格得到一个不同的CSS类,如果新的值高于或以前的低。
我心里有不同的可能性,如在存储的BindingContext于前值,并有返回的权利类的功能,但有可能增加其接收前值和新值自定义绑定处理程序?
我需要一个表绑定淘汰赛,和我想的表格单元格得到一个不同的CSS类,如果新的值高于或以前的低。
我心里有不同的可能性,如在存储的BindingContext于前值,并有返回的权利类的功能,但有可能增加其接收前值和新值自定义绑定处理程序?
尽管杰夫的和斯瓦沃米尔的答案会的工作,我发现不需要任何改变视图模型,也不依赖于改变DOM元素对象的替代品。
function subscribeToPreviousValue(observable, fn) {
observable.subscribe(fn, this, 'beforeChange');
}
ko.bindingHandlers['bindingWithPrevValue'] = {
init: function (element, valueAccessor) {
var observable = valueAccessor();
var current = observable();
console.log('initial value is', current);
subscribeToPreviousValue(observable, function (previous) {
console.log('value changed from', previous, 'to', current);
});
}
};
当然,如果绑定属性是可观察到的只会工作。
我看着淘汰赛源 ,我想你不能bindingHandler的更新方法内访问前值,但您可以在店内元素
ko.bindingHandlers['bindingWithPrevValue'] = {
update: function (element, valueAccessor) {
var prevValue = $(element).data('prevValue');
var currentValue = valueAccessor();
$(element).data('prevValue', currentValue());
// compare prevValue with currentValue and do what you want
}
};
你可以做的就是创建一个扩展来扩展你想要跟踪先前值的观测。 然后,您可以检查以前的值,你希望做的。
只是通过在将保持前值的属性的名称。
ko.extenders.previousValue = function (target, propertyName) {
var previousValue = ko.observable(null);
target[propertyName] = ko.computed(previousValue);
target.subscribe(function (oldValue) {
previousValue(oldValue);
}, target, 'beforeChange');
return target;
};
然后使用它:
function ViewModel() {
this.value = ko.observable('foo').extend({ previousValue: 'previousValue' });
}
var vm = new ViewModel();
console.log(vm.value()); // 'foo'
console.log(vm.value.previousValue()); // null
vm.value('bar');
console.log(vm.value()); // 'bar'
console.log(vm.value.previousValue()); // 'foo'
在你的情况,你很可能是这样的:
function TableCell(value) {
this.value = ko.observable(value).extend({ previousValue: 'previousValue' });
this.cssClass = ko.computed(function () {
// I'm assuming numbers
var current = Number(this.value()),
previous = Number(this.value.previousValue());
if (current < previous)
return 'lower';
else if (current > previous)
return 'higher';
}, this);
}