javascript - 如何从 knockout.js 中的组件订阅父模型中的 observable

Question

我正在处理一些使用 Knockout.js 的旧代码，我必须添加一项新功能，但我一度有点迷失。我无法分享实际代码，因此我将使用一些伪代码来描述我的问题

假设我有一些示例 View 模型

function ViewModel(params) 
  {
    this.questions = params.questions;
    this.clear = ko.observable();
  }

它从外部源获取一系列问题，但它不是一个可观察的数组。我在 View 模型中还有一个函数，用于填充clear() 可观察对象

ViewModel.prototype.add = function()
{
  if (this.clear === 'No'){
    this.clear('Yes');
   } else{
    this.clear('No');
   }
}

我有一个已注册的组件

ko.components.register('customComponent', {
  viewModel: function(params) {
    this.clearInComponent = ko.observable(params.clear);
  },
  template: '<div data-bind="text: clearInComponent "></div>'
});

现在，在我的 HTML 中，我有一个按钮，单击该按钮即可为 Clear() 可观察对象和我从 View 模型传递参数的组件设置一些值

<button data-bind="click: add"></button>

<questionnaire params="questions: questions, clear:clear"></questionnaire>

现在，每当父 ViewModel 中的 clear() 值发生更改时，它也会反射(reflect)在预期的组件中。我想要实现的是设置对clearInComponent的订阅，这样当父 View 模型中的clear()可观察值发生变化时，我将能够捕获该事件并执行一些其他操作。我尝试在组件 View 模型中添加对clearInComponent的订阅，但它不起作用。

this.clearInComponent.subscribe = function(newValue){
   // do stuff
}

我的问题是这是否可能以及我该如何做到？提前致谢。

Answer 1

我认为这可能是问题所在:

this.clearInComponent = ko.observable(params.clear);

自 params.clear本身就是一个可观察量，您基本上将一个可观察量包装在另一个可观察量中，从而订阅 this.clearInComponent无用，因为它的值永远不会改变。

相反，只需使用 params.clear直接:

this.clearInComponent = params.clear;

this.clearInComponent.subscribe(function (newValue) {
    // this should work fine...
    console.log(newValue);
});