87

Is it possible in knockout to get the current value of an observable within a subscription to that observable, before it receives the new value?

Example:

this.myObservable = ko.observable();
this.myObservable.subscribe(function(newValue){
    //I'd like to get the previous value of 'myObservable' here before it's set to newValue
});

5 Answers 5

154
ko.subscribable.fn.subscribeChanged = function (callback) {
    var oldValue;
    this.subscribe(function (_oldValue) {
        oldValue = _oldValue;
    }, this, 'beforeChange');

    this.subscribe(function (newValue) {
        callback(newValue, oldValue);
    });
};

Use the above like this:

MyViewModel.MyObservableProperty.subscribeChanged(function (newValue, oldValue) {

});
6
  • 2
    fairly new to knockout, but I'm wishing this is the way the default subscribe was setup. Or.. this fn will at least scratch my first itch as I use 'subscribe' for the first time.
    – bkwdesign
    Commented Nov 8, 2013 at 20:54
  • 1
    There has been some movement on this on github.com/knockout/knockout/issues/914. Looks like it's slated for the 3.4 release.
    – AlignedDev
    Commented Sep 25, 2015 at 15:09
  • 2
    In case the subscribed observable value type is an Array, you have to slice it, otherwise the oldValue will always be the same as the newValue. Check a working example, here: jsfiddle.net/david_freire/xmk6u9yn/4 Commented Sep 30, 2015 at 2:27
  • 1
    Cool. Added a return value which is a subscription object with a dispose() function gist.github.com/30ff1f5c1adf215179b0046515f86e45
    – Michael
    Commented Jul 20, 2016 at 6:33
  • Oh just saw the git conversation.
    – Michael
    Commented Jul 20, 2016 at 6:36
92

There is a way to do a subscription to the before value like this:

this.myObservable = ko.observable();
this.myObservable.subscribe(function(previousValue){
    //I'd like to get the previous value of 'myObservable' here before it's set to newValue
}, this, "beforeChange");
2
  • what does this stands for here? Commented Jun 19, 2020 at 11:00
  • @ThanasisIoannidis It ensures that you can access the same value of "this" inside the callback function. Otherwise you would need to save it to another name beforehand, e.g. var self = this; (which is a perfectly valid strategy too).
    – marcus
    Commented Jul 14, 2021 at 18:16
22

Little change to Beagle90 answer. Always return the subscription itself to be able to access the dispose() for instance.

ko.subscribable.fn.subscribeChanged = function (callback) {
    var oldValue;
    this.subscribe(function (_oldValue) {
        oldValue = _oldValue;
    }, this, 'beforeChange');

    var subscription = this.subscribe(function (newValue) {
        callback(newValue, oldValue);
    });

    // always return subscription
    return subscription;
};
1
  • 2
    This is a real step up, but calling .dispose on the return value from this will only dispose of the second subscription, not the 'beforeChange' subscription Commented Jan 31, 2019 at 3:57
18

The pull request to add this feature has some different code that winds up being better than relying on using the beforeChange event.

All credit for the solution to Michael Best

ko.subscribable.fn.subscribeChanged = function (callback) {
    var savedValue = this.peek();
    return this.subscribe(function (latestValue) {
        var oldValue = savedValue;
        savedValue = latestValue;
        callback(latestValue, oldValue);
    });
};

To quote Michael:

I originally suggested using beforeChange to solve this problem but have since realized that it's not always reliable (for example, if you call valueHasMutated() on the observable).

0
4

I have found that I can call peek() from a writable computed observable to get the before value.

Something like this (see http://jsfiddle.net/4MUWp):

var enclosedObservable = ko.observable();
this.myObservable = ko.computed({
    read: enclosedObservable,
    write: function (newValue) {
        var oldValue = enclosedObservable.peek();
        alert(oldValue);
        enclosedObservable(newValue);
    }
});
3
  • 1
    That doesn't work, unfortunately, since by the time the subscribe callback is called, the value already changed and so peek() will give you the new value. Commented Jan 17, 2014 at 23:55
  • @MichaelTeper I know I posted my answer a year ago, but after I got some downvotes, I've just tested it, and it does work. See: jsfiddle.net/4MUWp
    – rjmunro
    Commented Jul 29, 2014 at 21:47
  • Ok I see what you did there... The question was about retrieving the value in a subscribe callback which cannot be done with peek(). Your example proves nothing and could confuse a newcomer. You basically are wrapping a private variable here, and display its value before setting it - so of course it won't have changed. Commented Feb 5, 2015 at 21:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.