javascript - 更新 Knockout 中的可见绑定(bind)吗？

Question

我刚刚开始学习Knockout，遇到了一个有趣的情况。

我有一个包含三个步骤的“向导”。根据步骤 1 和步骤 2 中所做的选择，步骤 3 中应显示不同的内容。

我在 Knockout 中做了一个函数:

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

在我的前端，我尝试了以下两个数据绑定(bind):

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

我可以看到加载页面时正在记录“inside candsendletter”。但是，当我转到向导中的步骤 3 时，我需要更新此“可见绑定(bind)”。

目前我在 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);

            }
        });
    };

所以我的问题是:

当我转到第三步时，如何确保我的 btnsubmit 按钮正在调用 canSendLetter 函数？

编辑:

我的 View 模型:

我在这里将priceStatus和priceStatusMessage定义为可观察量:

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

Answer 1

您的priceStatus字段确实是 observable ，但必须正确使用:

比较它的值(getter)时:

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

设置时它的值(setter):

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

当 ViewModel 上的某些数据发生更改时，Knockout 无法收到通知，唯一的方法是通过 observable能够“通知订阅者”的机制(如您的 canSendLetter 计算)。

参见Documentation .