Knockout observable 更新仅反映在内部范围内答案

【问题标题】：Knockout observable updates reflected only in inner scopeKnockout observable 更新仅反映在内部范围内
【发布时间】：2021-08-26 10:36:31
【问题描述】：

我正在尝试从 Ajax 回调中更新 Observable，使用...

function LocaleVM() {
    const self = this;
    self.Language = ko.observable("en");
    self.Strings= ko.observable();
    self.toggleLanguage = function () {
        const lang = self.Language() === 'en' ? 'es' : 'en';
        console.log(self.Language());
        console.log(lang);
        $.ajax({
            url: `/${lang}`,
            method: 'GET',
            success: function (data, textStatus, xhr) {
                self.Language(lang);
                console.log(self.Language());
                console.log(lang);
                //===============================================
                ... update strings ...
            },
            error: function (xhr, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });
    }
}

这就是每次调用toggleLanguage 时的控制台输出...

en
es
es
es

这似乎在回调中更新得很好，但在外面却没有。这里似乎有什么问题？

【问题讨论】：

我认为是因为您使用的是const lang，而不是const 暗示它之后不能重新分配？也许尝试用var 替换const 看看是否有帮助

标签： javascript knockout.js

【解决方案1】：

看起来您从未真正更新过 Language observable 的值。

这是您的脚本的精简版...

self.toggleLanguage = function () {
    const lang = self.Language() === 'en' ? 'es' : 'en';
    $.ajax({
        url: `/${lang}`,
        method: 'GET',
        success: function (data, textStatus, xhr) {
            self.Language(lang);       //  <<<  THIS IS ALWAYS THE SAME VALUE.
            console.log(self.Language());
            console.log(lang);
        }
    });
}

我只能假设您在该 AJAX 请求中获取的值，但您不想要这样的东西吗？

self.toggleLanguage = function () {
    $.ajax({
        url: `/${lang}`,
        method: 'GET',
        success: function (data, textStatus, xhr) {
            self.Language(data);       //  <<<  USE THE NEWLY-FETCHED VALUE.
            console.log("Previous value: " + lang);
            console.log("Current value: " + self.Language());
        }
    });
}

【讨论】：