CODEWITHSUNDEEP
knockout.jscustom-binding
4imble
4imble

Reputation: 14426

Knockout custom binding get value before update

I have a custom binding, that has implemented update.

I would like to know what the value was before update was called. I can not see that it is passed into any of the parameters. Have i missed it?

    ko.bindingHandlers.ticker= {
        update: function (element, valueAccessor, allBindingsAccessor) {
            var toNumber = ko.utils.unwrapObservable(valueAccessor());
            var fromNumber = 0; //<---- can i set this to the old value?

            var counter = new Ticker(element, fromNumber, toNumber);

            counter.start();
        }
    }

Currently i am counting from 0 to the value (this is simply animated in the UI) but i would like to be able to count from the old value to the new value instead of it resetting to 0 and then counting from there.

Upvotes: 1

Views: 1139

Answers (2)

Olga
Olga

Reputation: 1690

There are two ways to do this:

1) Use ko.utils.domData API to store some data with your element.

// Read previous data
var prevData = ko.utils.domData.get(element, 'dataKey');
var newData = 42;

// Remember data for next time update is called
ko.utils.domData.set(element, 'dataKey', newData);

2) Do not use update at all. Everything you do with update you can also do with a computed or a simple subscription.

ko.bindingHandlers.ticker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var toNumber = ko.utils.unwrapObservable(valueAccessor());
        var fromNumber = 0;        

        function startTicker(toNumber) {
            var counter = new Ticker(element, fromNumber, toNumber);
            counter.start();
            fromNumber = toNumber;
        }

        ko.computed(function () {
            startTicker(toNumber);
        }, null, { disposeWhenNodeIsRemoved: element });
    }
}

Note the computed will be safely disposed if your dom node is removed.

Upvotes: 2

Nick Caballero
Nick Caballero

Reputation: 944

Assuming that the ticker will be updating the element value from fromNumber to toNumber, you could just implement this as an observable and then use the text binding to update the element. If the ticker is purely for the UI and its state shouldn't be reflected in the model, then consider consuming an object instead of an observable for the valueAccessor(), taking the from and to in that way.

If you still need to have the original state, then you could also use the init of the binding to capture the original value.

Upvotes: 1

Related Questions