在敲除js绑定的同时构建隐藏屏幕的最佳方法是什么？ [英] What is the best way to hide the screen while knockout js bindings are being built?

问题描述

我是一个巨大的淘汰赛粉丝。我现在用它来进行我的所有网络开发，只是喜欢它。我无法弄清楚的一件事是如何在构建knockoutjs绑定时隐藏UI。

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.

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

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.

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

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).

推荐答案

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

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>

- 另一种选择是使用 style =display：none以及可见绑定，可以绑定到已加载的 observable在应用绑定后将observable更改为 true 。

-Another choice is to use style="display: none" on the container element along with a visible binding that can be tied to a loaded observable where you change the observable to true after the bindings have been applied.

这篇关于在敲除js绑定的同时构建隐藏屏幕的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！