在构建淘汰 js 绑定时，隐藏屏幕的最佳方法是什么？

我是你的超级粉丝。我现在把它用于我所有的网页开发，并且非常喜欢它。但是有一件事我还没有弄明白，那就是在构建敲出 js 绑定时如何隐藏 UI。

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

解决这个问题的最好方法是什么？我试过使用助手类来隐藏它们，但是如果不删除助手类引用(即。Ui-helper-hide).

17960 次浏览
小开
最佳答案

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 visible binding that can be tied to a loaded observable where you change the observable to true after the bindings have been applied.

小开

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.

小开

Here's a CSS-only method if you're worried about unstyled widgets showing up before the bind for MVVM implementations.

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

I haven't tested it on all Kendo widgets, but it seems to work for most.

小开

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. 

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


</div>

The 'hide' and 'show' classes are already defined in Bootstrap.

If Bootstrap is not being used, the CSS can be defined as:

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

The order matters. The "hide" class should be defined before "show".


提交答案