如何定义自定义绑定谁使用前值来确定淘汰赛类?(How to define a custom bind

2019-08-17 04:06发布

我需要一个表绑定淘汰赛,和我想的表格单元格得到一个不同的CSS类,如果新的值高于或以前的低。

我心里有不同的可能性,如在存储的BindingContext于前值,并有返回的权利类的功能,但有可能增加其接收前值和新值自定义绑定处理程序?

Answer 1:

尽管杰夫的和斯瓦沃米尔的答案会的工作,我发现不需要任何改变视图模型,也不依赖于改变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);
}


文章来源: How to define a custom binding who use previous value to determine class in Knockout?