【问题标题】:Knockout - Computed Observable with manual Change notification淘汰赛 - 带有手动更改通知的计算 Observable
【发布时间】:2017-03-05 20:27:08
【问题描述】:

在淘汰赛中,我想编写一个 ComputedObservable,它是根据不可观察的值计算得出的。我想手动触发通知。

这有可能吗?

【问题讨论】:

    标签: javascript knockout.js data-binding


    【解决方案1】:

    计算变量只不过是一个在其中注册所有可观察对象的自定义事件的函数。

    当您的内部可观察变量发生变化时,它会广播一个notify 事件,并且所有侦听器都会捕获该事件并相应地进行处理。

    这个过程听起来很简单,但当您打算在纯 Javascript 变量上使用时却不是这样。可以参考Listening for variable changes in JavaScript or jQuery

    现在,如果您希望手动实现这一点,基本挑战:

    • 可以随时随地更改变量。您将不得不在任何地方手动触发他们的通知事件。如果你错过了,你会得到不正确的数据。
    • 您还必须为绑定添加事件监听器。就像应该计算的 total 变量一样。
    • 浏览器支持。 IE8 或更早版本不支持自定义事件,您必须为其添加 hack。

    我的建议是,对 observables 使用计算(或 pureComputed,如果在 KO3.2 或以上)。这样,您将节省大量代码。 Knockout 团队一定已经解决了这些问题,并在他们的代码中添加了对它的处理。您重新发明轮子将在您的代码库中添加大量代码,并且没有适当的文档,将难以维护。

    以下是 Fiddle,我在其中复制了 textInput 绑定以进行数字输入。如果您看到,它们对 IE10IE9IE8 或以下 有单独的处理。他们甚至对 5 岁以下的 safari 有特殊处理

    【讨论】:

    • 我想用knockout,我想用PureComputed。我唯一的问题是,我可以引发一个更改的事件,所以所有绑定到我的 PureComputed 的控件都被刷新了吗?因为在 pureComputed 我不使用 Observables
    • 我已经尝试过:this.value.notifySubscribers("blabla") 其中 this.value 是我的 pureComputed observable,但我的 UI 没有刷新
    • 这就是重点。如果计算函数内没有可观察对象,则没有通知事件,并且在这些变量更改时,计算将不会被触发。所以在notifySubscribers,订阅者将收到相同的值。
    【解决方案2】:

    我完全同意在您的计算中仅使用 ko.observable 变量的其他答案。如果重新评估不是自动的,我不明白为什么要使用计算。我建议改为创建一个普通函数。

    我看到的最接近的方法是创建一个计算订阅的虚拟 observable。您可以拨打valueHasMutated强制重新评估:

    var a = "A";
    var b = "B";
    
    var subscriptionObs = ko.observable();
    
    var ab = ko.pureComputed(function() {
      subscriptionObs();
      return a + b;
    });
    
    ko.applyBindings({ab: ab });
    
    
    b = "C";
    subscriptionObs.valueHasMutated();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    
    <p data-bind="text: ab"></p>

    【讨论】:

      猜你喜欢
      • 2019-06-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-07-21
      • 2020-05-30
      • 2013-03-22
      • 2013-04-10
      • 1970-01-01
      相关资源
      最近更新 更多