淘汰赛“闪烁”问题答案

【问题标题】：Knockout 'flickering' issue淘汰赛“闪烁”问题
【发布时间】：2013-11-02 03:27:36
【问题描述】：

我正在使用 KO 构建一个 SPA（单页应用程序）。该应用程序看起来像一本书，用户可以翻页。

问题在于，每次页面加载时，页面都会在短时间内“闪烁”，并且用户会看到页面的无样式版本。我猜这是因为很多样式都依赖于 ko 绑定，所以在 ko 完成它之前，用户会看到未设置样式的代码。

是否可以判断 KO 何时完成所有绑定，然后才显示页面？

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

【问题讨论】：

您可能希望重新设计页面绑定的完成方式。看不到代码并不能说明太多，但您可以处理您的页面渲染，并使用 afterRender 绑定在页面上分配您的可观察对象

标签： javascript knockout.js singlepage single-page-application

【解决方案1】：

是的，实际上这很容易。将display:none 应用于顶层div（或w/e 容器）和data-bind="visible: true"。这将导致页面被隐藏，直到淘汰赛通过绑定取消隐藏它（这显然在完全加载之前不会发生）。

由于您使用的是不可观察的值，因此 Knockout 甚至不会费心重新检查它。初始绑定后不应该存在性能问题。

【讨论】：

听起来是个很酷的主意，我会试试看，如果可行，我一定会标记你的答案:)
只是为了扩展这一点，您可以将绑定应用于“加载”动画 DIV，该 DIV 覆盖您试图防止闪烁的区域。主应用程序初始化后，您可以隐藏覆盖，显示应用程序。这样做的一个优点是应用程序元素的逻辑“可见性”不受干扰，因此任何绑定/设置逻辑仍然可以正确运行。另一件事 - 如果在 KO 处理绑定时自动显示还不够，您可能希望绑定到您设置的视图模型中的一个标志，以指示您的初始化何时完成。
我看到的答案是，最初隐藏的元素在页面加载后闪烁。我认为这对我的目的来说很好。如果我反其道而行之，让它可见，然后使用敲除可见绑定来隐藏它，我认为效果更差。我需要两者，因为元素应该根据页面上的其他状态显示/隐藏，随着用户与其交互而变化。这种情况有什么想法吗？
是的，只需更改可见绑定以使用任何可观察的跟踪您感兴趣的状态的状态
对目标元素应用 static css 比较靠谱，然后执行 JS 移除样式（通过ko.subscribe，或者更明确的，比如：调用@之后987654325@，或者在显示视图之前调用的任何 init/ajax 方法的回调中。）使用静态 true/false 值然后依赖 data-bind 的问题是 eval 被推迟到 ko.applyBindings 开始执行，而静态 css 在评估标记时应用（预渲染）。通过 JS 删除样式允许您真正推迟显示直到绑定完成后

【解决方案2】：

我认为以前使用模板可以更好地回答这个问题。

What is the best way to hide the screen while knockout js bindings are being built?

【讨论】：