在构建淘汰赛 js 绑定时隐藏屏幕的最佳方法是啥？

Posted 2023-02-22

【中文标题】在构建淘汰赛 js 绑定时隐藏屏幕的最佳方法是啥？

【英文标题】：What is the best way to hide the screen while knockout js bindings are being built?在构建淘汰赛 js 绑定时隐藏屏幕的最佳方法是什么？

【发布时间】：2012-03-20 21:57:22

【问题描述】：

我是一个巨大的 knockoutjs 粉丝。我现在将它用于我所有的 Web 开发，并且很喜欢它。不过，我无法弄清楚的一件事是如何在构建 knockoutjs 绑定时隐藏 UI。

例如，我有一个非常强大的用户界面，在我的页面上使用了很多模板。我注意到的问题是，当用户第一次访问该页面时，他们会在一瞬间看到我的所有模板，然后绑定才会启动并隐藏它们。

解决此问题的最佳方法是什么？我尝试使用辅助类来隐藏它们，但是除非我删除辅助类引用（即 ui-helper-hidden），否则无法使用 'visible' 和 'if' 绑定显示模板。

【参考方案1】：

我刚刚google了一下，用了observable的方式后，想到了另一种方法：

<div style="display: none" data-bind="visible: true">
  <ul data-bind="foreach: items">
    <li data-bind="text: name"></li>
  </ul>
</div>

您不需要可观察对象，一旦数据绑定完成，可见对象将始终评估为真。

【讨论】：

太棒了！当您不想要额外的 div 时，在此基础上再进行一项优化：<ul data-bind="foreach: items, visible: true"> <li data-bind="text: name"></li> </ul>

谢谢！我应该补充一点，我刚刚将样式/数据绑定添加到我现有的 div 中，并且由于某种原因只隐藏了其中的一部分。所以我添加了一个外部div。顺便说一句，我在<div data-bind='visible: false'> Screen loading... </div>

之前也添加了这个

太棒了！您还可以拥有一个包含加载动画的 div，其数据绑定为“visible: false”。

Angular 试图做的太多了。我将永远更喜欢与 SammyJS 等其他库结合使用的简单性。

派对可能有点晚了，但如果你想做 css 动画来显示它（比如不透明度或其他东西），你可以做 <div class="beforeReady" data-bind="css: ready: true">

【参考方案2】：

您可以在此处使用几种策略。

-一种是将所有实际内容放入脚本标签中的模板中（与原生模板一起工作正常）。在模板中，您可以使用控制流绑定。这就像：

<div data-bind="template: 'contentTmpl'"></div>

<script id="contentTmpl" type="text/html">
   <ul data-bind="foreach: items">
       <li data-bind="text: name"></li>
   </ul>
</script>

-另一种选择是在容器元素上使用 style="display: none" 以及 visible 绑定，该绑定可以绑定到 loaded 可观察对象，在应用绑定后将可观察对象更改为 true。

【讨论】：

作为记录，我使用的是“加载”建议，但它对我不起作用。我所有的 js 引用都在我的页面底部，并且标记在 applyBindings 调用（js 的最后一行）之前是可见的。我只是想将此作为注释添加，因为这是我最初试图解决的问题。再次感谢！

我编辑了答案来描述loaded observable 的工作方式。您需要在容器元素上添加style="display: none" 和visible: loaded，然后在应用绑定后将其切换为true。 visible 绑定将删除 display: none（它无法控制您的 CSS 中的内容）。

@RPNiemeyer，如果服务器返回非 JS 页面，第二种方法可能对 SEO 效果不佳。在我的情况下，淘汰赛为服务器生成的 UI 添加了一层，display:none 可能不会被机器人拾取。

【参考方案3】：

如果您担心在MVVM implementations 的绑定之前显示未设置样式的小部件，这里有一个纯 CSS 方法。

[data-role]:not([role], [tabindex]) 
    visibility: hidden;

我还没有在所有 Kendo 小部件上测试它，但它似乎适用于大多数。

【参考方案4】：

这是使用“隐藏”和“显示”类而不是内联样式的替代方法。将“隐藏”类添加到需要隐藏直到内容加载的元素，并添加“css”数据绑定使其在绑定时显示。

<div class="hide" data-bind="css: 'show': true">

</div>

'hide' 和 'show' 类已在 Bootstrap 中定义。

如果没有使用 Bootstrap，CSS 可以定义为：

.hide 
  display: none !important;

.show 
  display: block !important;
 

顺序很重要。 “隐藏”类应该在“显示”之前定义。