javascript - 是否可以延迟计算的可观察对象，直到某些 UI 元素变得可见？

Question

我的模型中有一个计算可观察值，如下所示:

   this.TrainingPlanTemplates = ko.computed(function ()
   {
      var workgroups = model.WorkgroupsImpacted();
      var areas = model.AreasImpacted();
      var plans = model.PrescribedPlan();

      $(plans).each(function (i, v)
      {
         // A bunch of stuff that really slows everything down
      });

      // ...
   }

然后我有一个 UI 模板:

<table>
   <!-- ko foreach: TrainingPlanTemplates -->
   <tr> ... Various columns bound to TrainingPlanTemplates properties ... </tr>
   <!-- /ko -->
</table>

问题是，上面的 HTML 模板包含各种自定义绑定(bind)处理程序，并且可能包含大量数据。呈现此表有点慢(大约 5 秒左右)。此 UI 使用 jQuery UI tabs control ，所以我什至不在页面加载时显示数据。大多数用户甚至永远不会切换到该选项卡，这意味着我通常是在浪费时间绑定(bind)该数据。

问题:有没有一种方法可以延迟计算可观察对象的绑定(bind)，直到我这样说，例如，直到某个 jQuery 选项卡变为事件状态？

想法:

我从 this page 得到了一些想法.确实存在一个 deferEvaluation 属性，但是这只会延迟属性直到有东西访问它，这将立即发生，因为隐藏的 HTML 表仍然绑定(bind)到数据。

一个想法是创建一个名为 TrainingPlanTemplatesLoaded 的新observable 属性，并在选项卡激活时将其设置为 true。然后，在 TrainingPlanTemplates 和 TrainingPlanTemplatesLoaded 之间创建依赖关系，这样当 TrainingPlanTemplatesLoaded 发生变化时，TrainingPlanTemplates 实际上会加载真实数据.

关于实现此目标的最佳方法还有其他想法吗？

Answer 1

是的，只是制作另一个您在计算之前检查的可观察对象:

// set to true when you want the computation to run
this.TrainingPlanTemplatesLoaded = ko.observable(false);
this.TrainingPlanTemplates = ko.computed(function ()
{
  if (this.TrainingPlanTemplatesLoaded()) {
      var workgroups = model.WorkgroupsImpacted();
      var areas = model.AreasImpacted();
      var plans = model.PrescribedPlan();

      $(plans).each(function (i, v)
      {
         // A bunch of stuff that really slows everything down
      });

      // ...
  }
}, this);