Question

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

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

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

Answer 1

我只是为此而谷歌，在使用可观察的方式后，我想到了另一种方法：

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

您不需要observable，一旦数据绑定完成，可见总是会评估为true。

Answer 2

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

- 一个是将所有实际内容放入脚本标记中的模板中（对于本机模板可以正常工作）。在模板中，您可以使用控制流绑定。这就像：

<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"以及visible绑定，该绑定可以绑定到loaded可观察量，您可以将observable更改为true在应用绑定之后。

Answer 3

如果您担心在MVVM implementations绑定之前出现无格式小部件，那么这是一种仅限CSS的方法。

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

我还没有在所有的剑道小部件上测试它，但它似乎适用于大多数。

Answer 4

这是使用“隐藏和显示”类而不是内联样式的替代方法，向需要隐藏直到内容加载的元素添加“隐藏”类，并添加“ css”数据绑定使其在绑定时显示。

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

</div>

'hide'和'show'类已经在Bootstrap中定义。

如果未使用Bootstrap，则CSS可以定义为：

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

顺序很重要。 “隐藏”类应在“显示”之前定义。

在敲除js绑定的同时构建隐藏屏幕的最佳方法是什么？

4 个答案: