javascript - 如果 Knockout pureCompulated 包含可能并不总是存在的可观察值，它可以工作吗？

Question

很抱歉，如果问题措辞不当。

我的问题是，我想更改基于 pureCompulated 的元素样式，但计算包含一个可观察量，在构造组件时该可观察量可能并不总是存在，因为该可观察量来自不同的组件并且该组件可能不会提前构建。

所以我目前有这样的东西，我希望它足够但不起作用:

this.thingRunning = ko.pureComputed(function() {
    if(app.thing){
        return app.thing.running();
    }else{
        return false
    }
}, this);

所以问题是，如果app.thing最初是未定义的，那么这个计算总是返回false。 app.thing 最终会被定义，只是不是在计算之前，所以我希望计算结果在定义时能够返回 true。

我知道这可能是我的应用程序一般设置方式的问题，但我只是想知道是否有一种简单的方法可以解决这个问题，而我却错过了，因为我对 Knockout 和 JavaScript 仍然是一个菜鸟。一般。

Answer 1

是的，绝对可以!

但是，按照目前的结构，您可能不会像您期望的那样得到重新评估。

更好的方法是:

this.thingRunning = ko.pureComputed(function() {
    var app = ko.unwrap(app) || {},
        thing = ko.unwrap(app.thing) || {},
        running = ko.unwrap(thing.running);

    return ((typeof running == 'undefined' || running === null) ? false : running);
}, this);

使用这种形式，pureCompulated的依赖关系非常清晰。更重要的是，它们已正确注册，只要这三个更改中的任何一个(并且是可订阅的形式之一)，那么这个 pureCompulated 将重新评估。它的优点是可以安全地导航可能不存在的值。

这是一个完整的示例:

function vm(){
	var self = this;
  
  self.thing = ko.observable({
  	running: ko.observable(true)
  });
};

function otherVm(appModel){
	var self = this;
  
  self.appModel = appModel;
  
  self.thingRunning = ko.pureComputed(function(){
  	var app = ko.unwrap(self.appModel) || {},
    		thing = ko.unwrap(app.thing) || {},
        running = ko.unwrap(thing.running);
        
    return ((typeof running == 'undefined' || running === null) ? false : running);
  });
};

var app = new vm(); //try commenting this out
var other = new otherVm();

console.log(ko.unwrap(other.thingRunning));