什么是最好的方式来隐藏屏幕js绑定正在build立?

我是一个巨大的淘汰赛球迷。 我现在用它来进行我所有的Web开发,只是喜欢它。 有一件事我没有弄清楚,但是在knockoutjs绑定正在构build的时候如何隐藏UI。

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

解决这个问题的最好方法是什么? 我已经尝试过使用帮助类来隐藏它们,但是除非我删除了辅助类的引用(例如,ui-helper-hidden),否则这些模板不能用'visible'和'if'绑定来显示。

有几个策略,你可以在这里使用。

– 一个是将所有的实际内容放置在脚本标签中的模板(使用本地模板工作正常)。 在模板中,您可以使用控制stream绑定。 这将是:

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

另一种select是在容器元素上使用style="display: none"以及一个visible绑定,绑定到一个已loaded observable,在应用绑定后将observable改为true

我只是googleing这个,使用可观察的方式后,我想到了另一种方法:

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

你不需要一个可观察的元素,一旦数据绑定完成,可见元素将总是被评估为真。

如果您担心在MVVM实现的绑定之前出现无格式的小部件,那么以下是仅限CSS的方法。

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

我还没有在所有的剑道部件上进行过testing,但它似乎对大多数人都有效。