Javascript 在构建击倒js绑定时，隐藏屏幕的最佳方式是什么？

我是一个巨大的击倒JS球迷。我现在把它用于我所有的网络开发，我非常喜欢它。但有一件事我还没有弄清楚，那就是如何在构建knockoutjs绑定时隐藏UI

例如，我有一个非常健壮的用户界面，页面上使用了很多模板。我注意到的问题是，当用户第一次访问页面时，他们会在绑定开始并隐藏之前的一瞬间看到我的所有模板

---

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

这里有几个策略可以使用

-一种是将所有实际内容放在脚本标记中的模板中（使用本机模板可以很好地工作）。在模板中，您可以使用控制流绑定。这就像：

<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”

，以及一个

可见的

绑定，该绑定可以绑定到一个

加载的

可观察对象上，在绑定应用后，您可以将可观察对象更改为

真的

。

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

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

---

您不需要可观察的，一旦数据绑定完成，可见的将始终计算为true。

如果您担心绑定之前会出现未样式的小部件，这里有一个仅用于CSS的方法

---

我没有在所有剑道小部件上测试过它，但它似乎对大多数小部件都有效。

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

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

</div>

---

顺序很重要。“hide”类应该在“show”之前定义。

对于记录，我使用了“loaded”建议，但它对我不起作用。我所有的js引用都在页面底部，标记在applyBindings调用之前是可见的（js的最后一行）。我只想将此添加为注释，因为这是我最初试图解决的问题。再次感谢！我编辑了答案，以描述加载的可观察对象的工作方式。您需要添加

style=“display:none“

在容器元素上与

可见：loaded

一起，然后在应用绑定后将其切换为true。”。

visible

绑定将删除

显示：none

（它无法控制css中的内容）。@RPNiemeyer，如果服务器返回非JS页面，第二种方法可能无法很好地进行SEO。在我的例子中，knockout为服务器生成的UI添加了一个层，

display:none

可能不会被机器人接收到。太棒了！当您不需要额外的div时，可以在上面再进行一次优化：

Thx！我应该补充一点，我刚刚将样式/数据绑定添加到我现有的div中，出于某种原因，它只隐藏了部分内容。所以我添加了一个外部分区。顺便说一句，我在
屏幕加载之前也添加了这个分区。。。
太棒了！您还可以有一个包含加载动画的div，其中的数据bing为“visible:false”。Angular试图做的太多了。我总是更喜欢将knockout与其他库（如SammyJSA）结合起来的简单性，可能会晚一点到派对，但是如果你想用css动画来显示它，你可以做
（比如不透明度之类的）
<div class="hide" data-bind="css: {'show': true}">

</div>

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