Question

我有一个带有对象层次结构的Knockout应用程序。如果我想访问HTML标记中对象的深层次，我会使用类似：

的内容

data-bind="text: property1().property2().property3()"

我想在纯Javascript中订阅相同的目标，即每当property3在当前绑定的对象上更改时，或者每当层次结构在property3下面更改时执行一个函数。换句话说，我想做类似的事情：

myviewmodel.deepSubscribe("property1().property2().property3()", function() { .... });

如何在淘汰赛中解决这个问题？

Answer 1

最好使用淘汰赛的computed功能。

您可以声明：

var computedProp = ko.computed(function(){
    return property1().property2().property3();
}

然后你可以绑定：

data-bind="text: computedProp"

您可以订阅它：

computedProp.subscribe(function() { .... });

Answer 2

在最简单的情况下，您只需直接订阅property3。假设一个这样的视图模型：

var reality = {
    dreamLevel1: ko.observable({
        dreamLevel2: ko.observable({
            dreamLevel3: ko.observable("some value")
        })
    })
};

然后你可以订阅一些普通的javascript来修改property3中的更改，如下所示：

reality.dreamLevel1().dreamLevel2().dreamLevel3.subscribe(function(newVal) {
    document.getElementById('proofOfConcept').innerHTML += "\n" + newVal
});

请参阅this fiddle了解我的意思。

当然，如果property2或property1发生变化，您需要重新订阅。您可以将要在订阅上执行的代码分解出来：

function lvl3Subscription(newVal) {
    document.getElementById('proofOfConcept').innerHTML += "\n" + newVal
}

然后直接订阅此初始级别3属性：

reality.dreamLevel1().dreamLevel2().dreamLevel3.subscribe(lvl3Subscription);

以及2级属性：

reality.dreamLevel1().dreamLevel2.subscribe(function(newDream) {
    newDream.dreamLevel3.subscribe(lvl3Subscription); 
});

等等。现在，如果级别2发生变化，因此级别3变得完全不同，则自定义Javascript代码仍将在新的3级可观察对象上进行订阅。

请参阅此in action in the updated fiddle。

Answer 3

为此我在这里写了Knockout Reactor：

https://github.com/ZiadJ/knockoutjs-reactor

它在深入订阅分层模型方面做得很好，并提供了很大的灵活性。

淘汰赛 - 订阅深度可观察的变化

3 个答案: