我的模型中有一个计算可观察值,如下所示:
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 实际上会加载真实数据.
关于实现此目标的最佳方法还有其他想法吗?
最佳答案
是的,只是制作另一个您在计算之前检查的可观察对象:
// 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);
关于javascript - 是否可以延迟计算的可观察对象,直到某些 UI 元素变得可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16288177/