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

问题描述

我是淘汰赛的忠实粉丝.我现在将它用于我所有的 Web 开发并且非常喜欢它.我一直无法弄清楚的一件事是如何在构建 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" 以及可以绑定到 loaded<的 visible 绑定/code> 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屋！