Knockout JS中enable绑定值更新后按钮状态未变如何解决

问题场景 #

需求为页面表格加载渲染完成后，将初始状态为禁用的PDF上传按钮切换为启用状态。调试确认表格渲染完成的回调函数已正常触发，控制按钮状态的变量值已被修改为true，但按钮始终保持禁用状态未更新。

原有实现代码 #

视图模型逻辑

self.uploadPdfButtonIsEnabled = false;
self.pricingTableRenderedHandler = function (data, stateName) {
        self.uploadPdfButtonIsEnabled = true;

        // 其他无关业务逻辑
}

cshtml视图按钮绑定代码

<button class="button button--primary" id="uploadPdfsButton" data-bind="click: $root.openPdfUpload, enable: uploadPdfButtonIsEnabled">
      <span class="button__text">Upload PDF</span>
</button>

故障原因 #

Knockout.JS的enable绑定仅会自动追踪 ko.observable（可监控属性） 的值变化，普通JavaScript变量的赋值操作不会被KO框架监听，因此不会触发DOM更新。
原有代码中uploadPdfButtonIsEnabled是普通布尔类型变量，仅在KO初始化绑定阶段读取了初始值false给按钮加上禁用属性，后续修改变量值的操作不会被KO感知，自然不会同步更新按钮状态。

修复方案 #

仅需修改视图模型中状态属性的声明和赋值方式，视图层绑定代码无需调整：

• 将控制按钮状态的属性声明为KO可监控属性，初始值传入false
• 更新状态时，遵循observable的函数调用语法传入新值，不能直接使用等号赋值

修正后视图模型代码 #

// 声明为KO可监控属性，值变更时会自动通知所有绑定的DOM元素更新
self.uploadPdfButtonIsEnabled = ko.observable(false);
self.pricingTableRenderedHandler = function (data, stateName) {
        // 给可监控属性赋值需要调用函数传参，不能直接写 = true
        self.uploadPdfButtonIsEnabled(true);

        // 其他无关业务逻辑
}

修改后回调触发时，KO会自动检测到uploadPdfButtonIsEnabled的值变为true，自动移除按钮的disabled属性，按钮即可正常启用。

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