1

我的模型中有一个计算出的 observable，如下所示：

   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 模板包含各种自定义绑定处理程序，并且可能包含大量数据。渲染这个表有点慢（比如 5 秒左右）。此 UI 使用 jQuery UI选项卡控件，因此在页面加载时我什至不显示数据。大多数用户甚至都不会切换到该选项卡，这意味着我通常会浪费时间绑定这些数据。

问题：有没有办法推迟计算的 observable 的绑定，直到我这么说，例如，直到某个 jQuery 选项卡变为活动状态？

想法：

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

一个想法是创建一个名为TrainingPlanTemplatesLoaded的新可观察属性，并在选项卡变为活动状态时将其设置为true 。然后，在TrainingPlanTemplates和TrainingPlanTemplatesLoaded之间创建依赖关系，以便在TrainingPlanTemplatesLoaded更改时，TrainingPlanTemplates实际加载真实数据。

关于实现这一目标的最佳方法的任何其他想法？

4

2 回答 2

3

是的，只需在进行计算之前检查另一个可观察对象：

// 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);
于 2013-04-29T23:02:26.667 回答
0

当然可以，请参阅我的示例：

function VM(){
    var self = this;
    self.FirstName = ko.observable("John");
    self.LastName = ko.observable("Smith");
    self.canShow = ko.observable(false);
    self.FullName = ko.computed(function(){
        if (self.canShow()){
            return self.FirstName() + " " + self.LastName();
        }
    });
}
myVm = new VM();
ko.applyBindings(myVm);

// Represents that at some point
// Some function make something happen
setTimeout(function(){
    // Let's say we check if an element was visible
    // or check anything that we want to know has happened, then:
    myVm.canShow(true);
}, 4000);


<p data-bind="text: FirstName"></p>
<p data-bind="text: LastName"></p>
<p data-bind="text: FullName"></p>
于 2013-04-30T08:26:26.757 回答