javascript - 如何定义使用先前值来确定 Knockout 中的类的自定义绑定？

Question

我需要用淘汰赛绑定一个表格，如果新值高于或低于前一个值，我希望表格单元格获得不同的 css 类。

我想到了不同的可能性，例如将先前的值存储在 bindingContext 中并具有返回正确类的函数，但是是否可以添加一个自定义绑定处理程序来接收先前的值和新值？

Answer 1

尽管Jeff和Sławomir的答案可行，但我找到了一种替代方案，它不需要对视图模型进行任何更改，也不依赖于更改 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);
    });
  }
};

当然，这只有在绑定属性是可观察的情况下才有效。

Answer 2

我查看了敲除源，我想您无法在 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
    }
};

Answer 3

您可以做的是创建一个扩展器来扩展您希望跟踪其先前值的可观察对象。然后，您可以检查先前的值以按照您的意愿进行操作。

只需传入将保存先前值的属性的名称。

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);
}