淘汰赛 JS 更新颜色答案

【问题标题】：Knockout JS Update Color淘汰赛 JS 更新颜色
【发布时间】：2012-05-14 19:16:52
【问题描述】：

我正在使用 Knockout observables 来更新位于表格单元格内的跨度值。当新值与旧值不同时，我需要更改表格单元格的背景颜色。似乎当我订阅 observable 时，我在更新期间无法访问旧值。有没有办法获得旧值？我计划使用带有可观察状态的 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);

【问题讨论】：

标签： knockout.js

【解决方案1】：

Knockout 2.0 添加了将主题订阅到可观察对象的功能。 “beforeChange”主题将为您提供之前的值。

有了这个，你可以扩展 observables 来添加一个订阅，为回调提供旧值和新值。

它可能看起来像：

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 以便能够对计算的和普通的 observables 执行此操作。

你可以这样使用：

this.temp.beforeAndAfterSubscribe(function (oldValue, newValue) {
    if (newValue > oldValue) {
        this.tempState = 1;
    }
    else {
        this.tempState = 0;
    }
}, this);

这是一个示例：http://jsfiddle.net/rniemeyer/QDbUk/

【讨论】：