KnockoutJS单向绑定失效：非Observable属性无法更新UI

问题原因 #

KnockoutJS的UI响应式更新完全依赖可观察对象（Observable）。普通JavaScript属性的赋值操作无法被Knockout追踪，所以即便AJAX成功给PersonName等属性赋值，Knockout也感知不到变化，自然不会同步更新UI。而你用到的isLoaded、loadingMessage是可观察对象，它们的变化能被Knockout监听并触发UI刷新，这就是改成Observable后正常显示的核心原因。

修复步骤 #

1. 将需要绑定到UI的普通属性替换为ko.observable()
2. 在AJAX回调中，通过函数调用的方式给可观察对象赋值（observable本质是函数，赋值时需传入参数）

修改后的完整代码 #

ViewModel 部分

function MyObjectModel() {
    var self = this;

    // 将普通属性改为可观察对象
    self.PersonName = ko.observable("");
    self.Instructions = ko.observable("");
    self.HasDetails = ko.observable(false);

    self.isLoaded = ko.observable(false);
    self.loadingMessage = ko.observable("");

    function init() {
        $.ajax({
            url: <url to api>,
            type: 'GET',
            beforeSend: () => {
                // 原有逻辑保留
            }
        })
        .done((data) => {
            if (!account.handleInvalidSessionResponse(data, true)) {
                // 通过函数调用赋值给可观察对象
                self.PersonName(data.PersonName);
                self.Instructions(data.Instructions);
                self.HasDetails(data.HasDetails);
            }
        })
        .catch((jqXHR, errorThrown, textStatus) => {
            // 原有错误处理逻辑保留
        })
        .always(() => {
            // 原有收尾逻辑保留
        })
    }
    init();
}

绑定代码（无需修改）

$(function () {
    var viewModel = new MyObjectModel();
    ko.applyBindings(viewModel, document.querySelector("[main-myObjectDetail]"));
});

UI标签（无需修改）

<span data-bind="text: PersonName"></span>

补充说明 #

Knockout的text绑定会自动识别可观察对象，无需手动调用PersonName()取值，绑定语法保持不变即可。当可观察对象的值发生变化时，Knockout会自动更新对应的UI元素。

内容的提问来源于stack exchange，提问作者Tee