javascript 在构建淘汰赛 js 绑定时隐藏屏幕的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9532595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to hide the screen while knockout js bindings are being built?
提问by Luc
I'm a huge knockoutjs fan. I use it for all my web development now and simply love it. One thing that I've not been able to figure out though is how to hide the UI while the knockoutjs bindings are being built.
我是一个巨大的淘汰赛粉丝。我现在将它用于我所有的 Web 开发并且非常喜欢它。我一直无法弄清楚的一件事是如何在构建 Knockoutjs 绑定时隐藏 UI。
For example, I have a very robust user interface with lots of templates being used on my page. The problem that I'm noticing is that when the user first visits the page, they see all of my templates for a split second before the bindings kick in and hide them.
例如，我有一个非常强大的用户界面，我的页面上使用了许多模板。我注意到的问题是，当用户第一次访问页面时，他们会在绑定开始并隐藏它们之前一瞬间看到我的所有模板。
What is the best way to fix this problem? I've tried using helper classes to hide them, but then the templates are not able to be displayed using 'visible' and 'if' bindings unless I remove the helper class reference (ie. ui-helper-hidden).
解决此问题的最佳方法是什么？我已经尝试使用辅助类来隐藏它们，但是除非我删除辅助类引用（即 ui-helper-hidden），否则无法使用“可见”和“如果”绑定显示模板。
采纳答案by RP Niemeyer
There are a couple of strategies that you can use here.
您可以在此处使用几种策略。
-One is to place all of your actual content into templates that live in script tags (does work fine with native templates). Within the template, you can then use control-flow bindings. This would be like:
- 一个是将所有实际内容放入脚本标签中的模板中（使用本机模板可以正常工作）。在模板中，您可以使用控制流绑定。这会是这样的：
<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>
-Another choice is to use style="display: none"on the container element along with a visiblebinding that can be tied to a loadedobservable where you change the observable to trueafter the bindings have been applied.
- 另一种选择是style="display: none"在容器元素上使用一个visible绑定，该绑定可以绑定到一个loadedobservable，true在应用绑定后您可以将observable 更改为。
回答by Jason More
I was just googleing for this, and after using the observable way, I thought of another approach:
我只是在谷歌搜索这个，在使用可观察的方式后，我想到了另一种方法：
<div style="display: none" data-bind="visible: true">
<ul data-bind="foreach: items">
<li data-bind="text: name"></li>
</ul>
</div>
You don't need an observable, the visible will always evaluate to true once the data binding is done.
您不需要 observable，一旦数据绑定完成，visible 将始终评估为 true。
回答by Sunny Patel
Here's a CSS-only method if you're worried about unstyled widgets showing up before the bind for MVVM implementations.
如果您担心在绑定MVVM 实现之前显示无样式的小部件，这里有一个仅 CSS 的方法。
[data-role]:not([role], [tabindex]) {
visibility: hidden;
}
I haven't tested it on all Kendo widgets, but it seems to work for most.
我还没有在所有的 Kendo 小部件上测试过它，但它似乎适用于大多数。
回答by M Y K
Here is alternative approach using classes for "hide and "show" instead of an inline style. Add a "hide" class to the element that needs to be hidden until the contents load, and add a "css" data-binding to make it be shown when it is bound.
这是使用“隐藏和显示”类而不是内联样式的替代方法。将“隐藏”类添加到需要在内容加载之前隐藏的元素，并添加“css”数据绑定以使其成为绑定时显示。
<div class="hide" data-bind="css: {'show': true}">
</div>
The 'hide' and 'show' classes are already defined in Bootstrap.
'hide' 和 'show' 类已经在 Bootstrap 中定义。
If Bootstrap is not being used, the CSS can be defined as:
如果没有使用 Bootstrap，CSS 可以定义为：
.hide {
display: none !important;
}
.show {
display: block !important;
}
The order matters. The "hide" class should be defined before "show".
顺序很重要。“隐藏”类应该在“显示”之前定义。
