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

【问题标题】：Knockout - Subscribing to deep observable changes淘汰赛 - 订阅深度可观察的变化
【发布时间】：2014-05-17 19:55:40
【问题描述】：

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

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

我想在纯 Javascript 中订阅同一个目标，即每当当前绑定的对象上的 property3 发生变化时，或者每当 property3 下面的层次结构发生变化时，就执行一个函数。换句话说，我想做这样的事情：

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

在淘汰赛中我该如何处理？

【问题讨论】：

Is it possible to iterate through mapped observable array and subscribe? 的可能重复项

标签： knockout.js

【解决方案1】：

最好使用computed的淘汰功能。

你可以声明：

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

然后你可以像这样绑定：

data-bind="text: computedProp"

您可以像这样订阅它：

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

【讨论】：

【解决方案2】：

为此，我在这里写了 Knockout Reactor：

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

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

【讨论】：

【解决方案3】：

在最简单的情况下，您只需直接订阅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 observable。

看到这个in action in the updated fiddle。

【讨论】：