Knockout闪烁问题

Question

我正在使用KO构建一个SPA（单页应用程序）。该应用程序类似于一本书，用户可以翻页。

问题在于每次加载页面时，会出现一个短暂的瞬间，用户会看到未经样式处理的页面版本。我猜这是因为很多样式都依赖于ko绑定，因此在ko完成其“魔法”之前，用户可以看到未经样式处理的代码。

是否可能告诉KO何时完成了所有绑定，并仅在此后显示页面？

我已经通过在加载视图之前设置超时来部分解决了此问题，但这当然不是一个好的解决方案。

- Tomer

---

你可以考虑重新设计页面绑定的方式。没有看到代码无法确定具体问题，但你可以处理页面渲染，并使用afterRender绑定来分配页面上的observables。 - Thewads

Answer 1

实际上非常简单。将display:none应用于顶级div（或其他容器），并添加data-bind="visible: true"。这将导致页面在knockout通过绑定取消隐藏之前被隐藏（显然，这只能在完全加载后发生）。

由于您使用的是非可观察值，因此Knockout甚至不会再次检查此内容。在初始绑定后，不应出现性能问题。

- Kyeotic

---

听起来是一个很棒的想法，我会尝试一下，如果它有效，我一定会标记你的答案 :) - Tomer

为了进一步说明，你可以将绑定应用于一个“加载”动画DIV，该DIV覆盖了您要防止闪烁的区域。一旦主应用程序初始化完成，您可以隐藏遮罩层，显示应用程序。 其中一个优点是应用程序元素的逻辑“可见性”不会受到干扰，因此任何绑定/设置逻辑仍然可以正确运行。 另外一件事-如果KO处理绑定时自动显示不足够，您可能希望将其绑定到视图模型中的一个标志，以指示您的初始化何时完成。 - Joseph Gabriel

我看到所选择的答案是，初始隐藏的元素在页面加载后会闪烁出现。我认为这对我的目的来说是可以接受的。如果我做相反的操作，使其可见，然后使用 knockout 的 visible 绑定来隐藏它，我认为效果会更差。我需要两者，因为该元素应根据页面上的其他状态显示/隐藏，而这些状态会随着用户与之交互而发生变化。针对这种情况有什么想法吗？ - Evan

是的，只需将可见绑定更改为使用跟踪您感兴趣的状态即可。 - Kyeotic

最可靠的方法是将静态CSS应用于目标元素，然后执行JS来删除样式（通过ko.subscribe，或更明确地，在调用ko.applyBindings之后，或在回调中调用任何init/ajax方法之前显示视图。）使用静态true/false值，然后依赖于data-bind的问题是，eval被推迟到ko.applyBindings开始执行时，而静态CSS是在评估标记时（预渲染）应用的。通过JS删除样式允许您真正推迟显示，直到绑定完成。 - Shaun Wilson

Answer 2

我认为之前使用模板回答得更好。

如何在构建knockout js绑定时隐藏屏幕？

- Matthew Will