【问题标题】:How to update an observable in a computed without triggering the computed?如何在不触发计算的情况下更新计算中的可观察对象?
【发布时间】:2017-03-11 16:47:19
【问题描述】:

我有一个在许多计算函数中使用的特定的淘汰赛 observable,它的工作方式完全符合预期。但是,在这些计算函数之一上,我不希望它在可观察值更新时触发。代码明智的看起来像这样:

  self.obs1 = ko.observable(foo);
  self.obs2 = ko.observable(bar);

  //I want this computed to behave normally
  this.comp1 = ko.computed(function() {
    return self.obs1() + self.obs2();
  }, this);

  //I want this computed to trigger on obs1 update but ignore updates to obs2
  this.comp2 = ko.computed(function() {
    return self.obs1() + self.obs2();
  }, self);

  setTimeout(function() {
    self.obs1(20);
    self.obs2(15);    
  }, 1000);

https://jsfiddle.net/r73yLk5u/

请注意,执行 comp2 时我仍然需要能够访问 obs2 的当前值,我只是不希望 obs2 的更新触发 comp2 具有新值。

这可能吗?

【问题讨论】:

  • 呃,我不知道这是否可能,但它可能与一些自定义扩展器或其他东西有关。但是,我确实认为这表明出了问题,在您继续执行此操作之前,请重新检查 为什么 您想要这样做,以及您是否不想解决 XY problem .
  • 谢谢@vlaz。你可能是对的,我只是不想在上下文中陷入困境。简而言之,基本上是我的 UI 刷新太多了,但我不能只使用 rateLimit,因为我想几乎立即看到对“obs1”的更新,但“obs2”的更新非常频繁,我从不真正关心。
  • 你有没有考虑在第二个 observable 上使用.extend({throttle: /* some reasonable value */ })
  • 希望我可以,但是使用第二个 observable 的其他计算肯定需要在更新时立即触发。无论如何,谢谢!
  • ..实际上,只要更新在辅助计算而不是 observable 本身上,这完全可以工作

标签: javascript knockout.js observable computed-observable


【解决方案1】:

要让它忽略对 observable 的更新,请使用 peek (docs):

peek 函数可让您访问 observable 或计算 observable 而无需创建依赖项。

更新示例:

//I want this computed to trigger on obs1 update but ignore updates to obs2
  this.comp2 = ko.computed(function() {
    return self.obs1() + self.obs2.peek();
  }, self);

https://jsfiddle.net/r73yLk5u/2/

【讨论】:

    【解决方案2】:

    好的,所以我想出了如何做到这一点。如果您创建一个新的计算对象,它只返回您想要延迟的可观察对象,则将其速率限制到它永远不会命中的点,您可以使用该计算对象代替可观察对象。如果将来由于任何其他原因触发计算,这也将使其始终使用最新的 obs2 值。

      self.obs2DelayComp = ko.computed(function() {
        return self.obs2();
      }).extend({ rateLimit: 3001 });
    

    https://jsfiddle.net/r73yLk5u/1/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-02-11
      • 1970-01-01
      • 1970-01-01
      • 2019-12-31
      • 2020-10-01
      • 2019-09-29
      • 2018-04-07
      • 2016-10-30
      相关资源
      最近更新 更多