淘汰赛JS更新颜色 [英] Knockout JS Update Color
问题描述
我正在使用Knockout观测值更新位于表单元格内的跨度值.当新值与旧值不同时,我需要更改表格单元格的背景颜色.似乎当我订阅可观察值时,我在更新期间无法访问旧值.有没有办法获得旧的价值?我打算使用状态可观察的css绑定来更新表格单元格背景.
<td data-bind="css: { tempIncreased: tempState() > 0 }">
<span data-bind="text: temp"></span>
</td>
在视图模型中:
this.temp.subscribe(function (newValue) {
var old = this.temp();
if (newValue > old) {
this.tempState = 1;
}
else {
this.tempState = 0;
}
}, this);
淘汰赛2.0增加了对可观察对象订阅主题的功能. "beforeChange"主题将为您提供先前的值.
通过此方法,您可以扩展可观察对象以添加为回调提供新旧值的订阅.
它看起来像:
ko.observable.fn.beforeAndAfterSubscribe = function(callback, target) {
var _oldValue;
this.subscribe(function(oldValue) {
_oldValue = oldValue;
}, null, 'beforeChange');
this.subscribe(function(newValue) {
callback.call(target, _oldValue, newValue);
});
};
您可以将此功能添加到ko.subscribable.fn
而不是ko.observable.fn
中,以便能够对计算的和正常的可观测值进行此操作.
您将这样使用:
this.temp.beforeAndAfterSubscribe(function (oldValue, newValue) {
if (newValue > oldValue) {
this.tempState = 1;
}
else {
this.tempState = 0;
}
}, this);
这里是一个示例: http://jsfiddle.net/rniemeyer/QDbUk/ >
I'm using Knockout observables to update span values located within table cells. I need to change the background color of the table cell when the new value is different from the old value. It seems when i subscribe to the observable i do not have access to the old value during an update. Is there a way to get the old value? I was planning to update the table cell background using the css binding with a state observable.
<td data-bind="css: { tempIncreased: tempState() > 0 }">
<span data-bind="text: temp"></span>
</td>
In the View Model:
this.temp.subscribe(function (newValue) {
var old = this.temp();
if (newValue > old) {
this.tempState = 1;
}
else {
this.tempState = 0;
}
}, this);
Knockout 2.0 added the ability to subscribe on a topic to observables. The "beforeChange" topic will provide you with the previous value.
With this you can extend observables to add a subscription that provides both the old and new values to the callback.
It could look like:
ko.observable.fn.beforeAndAfterSubscribe = function(callback, target) {
var _oldValue;
this.subscribe(function(oldValue) {
_oldValue = oldValue;
}, null, 'beforeChange');
this.subscribe(function(newValue) {
callback.call(target, _oldValue, newValue);
});
};
You could add this function to ko.subscribable.fn
rather than ko.observable.fn
to be able to do this for both computed and normal observables.
You would use this like:
this.temp.beforeAndAfterSubscribe(function (oldValue, newValue) {
if (newValue > oldValue) {
this.tempState = 1;
}
else {
this.tempState = 0;
}
}, this);
Here is a sample: http://jsfiddle.net/rniemeyer/QDbUk/
这篇关于淘汰赛JS更新颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!