Update the visible binding made in Knockout?

Question

I have just started to learn Knockout, and have an interesting sitaution.

I have a "wizard" with three steps. Depending on choices made in step 1 and step 2, different things should show in step 3.

I made a function in Knockout:

self.canSendLetter = ko.computed(function () {
    console.log('Inside canSendLetter');
    if (self.priceStatus == "success") {
        return true;
    }
    return false;
});

In my frontend I have tried the following with two databindings:

<input id="btnsubmit" type="submit" class="btn btn-primary btn-lg submitAbe" value="@ViewRes.StampAndSendLetter &raquo;" data-bind="visible: canSendLetter(), click: save" />

I can see that the "inside candsendletter" is being logged when I load the page. However, I need this "visible binding" to update, when I go to step 3 in my wizard.

Currently I have the following code in goToStepThree:

 self.goToStepThree = function () {
        if (self.uploadPdf() == 1 && self.uploadFileKey() == '') {
            self.showMissingUpload(true);
            return false;
        } else if (self.writeContentEditor.getData() == '') {
            self.showMissingWriteContent(true);
            return false;
        }

        var thiz = self;
        var writtenContent = encodeURIComponent(self.htmlEncode(self.writeContentEditor.getData()));
        $.ajax({
            url: self.getPriceUrl,
            type: 'POST',
            data: {
                usePdf: self.uploadPdf() == 1 ? 'true' : 'false',
                uploadFileKey: self.uploadFileKey(),
                content: writtenContent,
                address: self.address(),
                postal: self.postal(),
                city: self.city(),
                country: self.country()
            },
            dataType: 'json',
            success: function (data) {
                thiz.priceStatus = data.status;
                thiz.priceStatusMessage = data.message;
                thiz.cost(data.price);
                thiz.numberOfPages(data.numberOfPages);
                if (data.isAuthenticated) {
                    self.isAuthenticated(true);
                    self.isValidCredits(data.isValidCredits);
                    self.paymentMethod('Credits (' + data.credits + '$ left)');
                }

                thiz.currentStep(3);

            }
        });
    };

So my question is:

How do I make sure my btnsubmit button, is calling the canSendLetter function when I go to step three?

EDIT:

My viewmodel:

I defined the priceStatus and priceStatusMessage as observables here:

 self.priceStatus = ko.observable('');
    self.priceStatusMessage = ko.observable('');

Answer 1

Your priceStatus field is indeed an observable, yet it has to be used appropriately:

When comparing it's value (getter):

self.canSendLetter = ko.computed(function () {
    console.log('Inside canSendLetter');
    return self.priceStatus() === "success";
});

And when settings it's value (setter):

success: function (data) {
         thiz.priceStatus(data.status);
         thiz.priceStatusMessage(data.message);
         ...
         }

Knockout has no way to get notified when some data on your ViewModel is changed, the only way is to go through the observable mechanism that is able to 'notify subscribers' (like your canSendLetter computed).

See Documentation.