CODEWITHSUNDEEP
javascriptknockout.js
patel
patel

Reputation: 635

How to get knockout old value before binding set to new value?

i am doing custom binding to display the score :

my html like like this

<div class="notesite" id="note_1" data-bind="Score: ScoreValue()"></div>

self.ScoreValue= ko.observable("");

binding is like that :

ko.bindingHandlers.Score = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var myscorevalue = valueAccessor();
        if (myscorevalue) {

            //if(myscorevalue is decrease)
            {
                $("#divarrow").hide();
            }
            //if(myscorevalue is increasing)
            {
                $("#divarrow").show();
            }
        }
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var myscorevalue = valueAccessor();
        if (myscorevalue) {

            //if(myscorevalue is decrease)
            {
                $("#divarrow").hide();
            }
            //if(myscorevalue is increasing)
            {
                $("#divarrow").show();
            }
        }
    }
};

my issue is , based on score i passed , i want to show up and down arrow !

lets see my value is = self.ScoreValue("10")

and then i updated value to self.ScoreValue("15")

then i want to show $("#divarrow").show();

if i updated value to self.ScoreValue("5")

then i want to hide $("#divarrow").hide();

Upvotes: 0

Views: 243

Answers (1)

manji
manji

Reputation: 47978

You can create another field (ex. PreviousScoreValue) that will have the previous score using beforeChange subscription:

self.PreviousScoreValue = ko.observable(self.ScoreValue());

self.ScoreValue.subscribe(function(value) {
    self.PreviousScoreValue(value);
}, null, 'beforeChange');

Then in the custom binding, use it to compare to new ScoreValue:

init: function (element, valueAccessor, allBindingsAccessor, viewModel,
                bindingContext) {
    var myscorevalue = valueAccessor();
    var previousvalue = bindingContext.$data.PreviousScoreValue();

    if (myscorevalue) {
        if(myscorevalue < previousvalue)
        {
            $("#divarrow").hide();
        } else if(myscorevalue > previousvalue)
        {
            $("#divarrow").show();
        }
    }
},

Upvotes: 2

Related Questions