如何订阅Knockout中可观察对象的属性变更？

问题根源 #

你当前定义的this.deeplinkPopupModule = ko.observable({ view: [], viewModel: null })是一个包裹普通对象的可观察容器，Knockout的普通ko.observable只有在你完全替换整个对象（比如执行this.deeplinkPopupModule({view: [...], viewModel: newVM})）时才会触发订阅。直接修改内部的view或viewModel属性，不会触发订阅逻辑。

另外你原来的代码还有个上下文问题：订阅回调里的this默认不是你的ViewModel实例，需要手动绑定上下文才不会报错。

方案一：将内部属性改为可观察属性（推荐） #

把view和viewModel分别定义成Knockout的可观察对象/数组，这样它们的变更会被单独追踪，适合需要监听数组元素增删的场景：

// 重新定义结构，内部属性用可观察类型
this.deeplinkPopupModule = {
    view: ko.observableArray([]), // 数组用observableArray，支持元素增删触发订阅
    viewModel: ko.observable(null)
};

// 订阅view的变更（包括数组元素增删）
this.deeplinkPopupModule.view.subscribe(function(newView) {
    this.handleModuleUpdate();
}, this);

// 订阅viewModel的变更
this.deeplinkPopupModule.viewModel.subscribe(function(newVM) {
    this.handleModuleUpdate();
}, this);

// 统一处理变更逻辑
this.handleModuleUpdate = function() {
    if (this.deeplinkPopupModule.view().length === 0) {
        this.addNewOpened(false);
    }
};

方案二：用computed监听内部属性（不修改原结构） #

如果不想调整原有对象结构，可以用ko.computed追踪内部属性的依赖，只要view或viewModel发生变更（注意：数组元素增删不会触发，只有替换整个数组才会），就会触发订阅：

// 保持原定义不变
this.deeplinkPopupModule = ko.observable({ view: [], viewModel: null });

// 用computed包裹需要监听的属性，Knockout会自动追踪依赖
ko.computed(function() {
    const module = this.deeplinkPopupModule();
    // 读取要监听的属性，让computed建立依赖
    return {
        view: module.view,
        viewModel: module.viewModel
    };
}, this).subscribe(function(newVal) {
    console.log("view或viewModel已变更");
    if (newVal.view.length === 0) {
        this.addNewOpened(false);
    }
}, this);

原代码的问题修正 #

如果一定要用原结构，只有当你完全替换整个对象时才会触发订阅，同时要绑定上下文：

this.deeplinkPopupModule.subscribe(function(newVal){
    console.log("inside module subscribe");
    if(newVal.view.length === 0) 
        this.addNewOpened(false);
}, this); // 这里传入this绑定上下文

// 只有执行这种替换操作才会触发订阅
this.deeplinkPopupModule({ view: [], viewModel: someNewVM });

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