构建敲除js绑定时隐藏屏幕的最佳方法是什么？

76

我是淘汰赛的忠实粉丝。我现在将其用于我的所有Web开发，并且很喜欢它。我无法弄清的一件事是如何在构建基因敲除js绑定时隐藏UI。

例如，我有一个非常健壮的用户界面，页面上使用了许多模板。我注意到的问题是，当用户首次访问该页面时，他们会在一秒钟内看到我的所有模板，然后才开始绑定并隐藏它们。

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

javascript mvvm knockout.js

— 卢克
source

71

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

-一种方法是将所有实际内容放入脚本标记中的模板中（与本机模板配合正常）。然后，您可以在模板中使用控制流绑定。就像：

<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的绑定，在已应用绑定之后将可观察对象更改为可观察对象。

— RP尼迈耶
source

1

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

— 2012年

4

我编辑了答案，以描述loaded可观察对象的工作方式。您需要与一起添加style="display: none"容器元素visible: loaded，然后在应用绑定后将其切换为true。的visible结合将删除display: none（无法控制什么是你的CSS）。

— RP Niemeyer 2012年

@RPNiemeyer，如果服务器返回非JS页面，第二种方法对SEO可能效果不佳。在我的案例中，淘汰赛为服务器生成的UI添加了一层，display:none而僵尸程序可能无法拾取。

— 詹森·内森

196

我只是在谷歌上搜索，使用可观察的方式后，我想到了另一种方法：

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

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

— 杰森·莫尔
source

13

优秀！当您不想要额外的div时，可以进行进一步的优化： <ul data-bind="foreach: items, visible: true"> <li data-bind="text: name"></li> </ul>

— Greg R

15

谢谢！我应该补充一点，我只是将样式/数据绑定添加到了现有的div中，由于某种原因，它只隐藏了一部分。因此，我添加了一个外部div。顺便说一句，我之前也添加了此内容 <div data-bind='visible: false'> Screen loading... </div>

— joelhoro

3

优秀！您还可以有一个div，其中包含一个加载动画，其数据段为“ visible：false”。

— Michael Fry 2014年

1

Angular尝试做太多事情。我将永远与像SammyJS其他图书馆喜欢敲除的简单组合

— PIM

1

也许聚会晚了一点，但是<div class="beforeReady" data-bind="css: {ready: true}">如果您想做css动画来显示它（例如不透明之类的东西），就可以做

— 托马斯

0

如果您担心MVVM实现的绑定之前会出现未样式化的小部件，那么这是仅CSS的方法。

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

我尚未在所有Kendo小部件上对其进行测试，但它似乎适用于大多数情况。

— 阳光明媚的帕特尔
source

0

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

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

</div>

“隐藏”和“显示”类已在Bootstrap中定义。

如果未使用Bootstrap，则CSS可以定义为：

.hide {
  display: none !important;
}
.show {
  display: block !important;
}

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

— MYK
source