70

我在我的 Html 中使用以下淘汰脚本：

<!-- kno ifnot: bla -->

 <tr><td>some stuff</td></tr>

<!-- /ko -->

我遇到的问题是，在执行绑定之前，这一行将显示一两秒钟。

我怎样才能防止这种情况发生？

4

4 回答 4

157

这是一个简单的技巧。只需使您的根元素最初隐藏并将可见绑定设置为 true。

<div style="display: none;" data-bind="visible: true">
    <!-- the rest of your stuff -->
</div>

当它被渲染时，在淘汰赛做它的事情之前，它最初会被隐藏。应用绑定后，剔除将覆盖样式并使其可见。

或者，您可以将视图放入脚本块中并通过模板对其进行实例化。脚本块不会被渲染，但会在敲除渲染模板时可见。

<!-- ko template: 'myView' --><!-- /ko -->
<script id="myView" type="text/html">
    <!-- the rest of your stuff -->
</script>
于 2012-11-01T01:04:31.310 回答
2

由于您想要的行为通常因页面而异 - 这就是我在布局/模板文件 (ASP.NET) 中所做的事情。

 <div class="ko-unbound" data-bind="css: { 'ko-unbound': false, 'ko-bound': true }">
    @RenderBody()
 </div>

页面绑定时：

  • ko-unbound类从页面中删除（最初添加class属性）。
  • ko-bound类被添加到页面。

然后在不需要的内容是一个问题的页面中，我可以自定义 css 以显示或隐藏基于这两个类的东西。我还使用这种技术来显示“加载”图像，或者可能为元素施加最小高度。

.ko-unbound #storeWizard
{
    display: none;  // hide entire section when the page is binding
}

.ko-bound #loadingGraphic
{
    display: none;  // hide loading graphic after page is bound
}

在测试期间，在应用绑定时，我添加了一个超时，以便我可以看到闪光灯。

 setTimeout(function ()
 {
     ko.applyBindings(RR.VM);

 }, 300);
于 2015-02-08T06:22:10.277 回答
1

用这样的方式包装你的 html -

<div id="hideme" style="display:none">
</div>

然后在您的 JavaScript 中，在您的应用绑定之后添加以下 jquery 行 -

$('#hideme').show();

这是我发现的最简单的方法。您可以使用一些淘汰赛绑定来做到这一点，但是您会失去保证的时间，因为您无法控制执行绑定的顺序。

于 2012-10-31T23:33:27.697 回答
0

我在这里找到的另一个解决方案

<div id="binding-start" style="visibility:hidden" data-bind="attr: { 'style': 'visibility:visible' }" />

这具有优点或缺点，具体取决于您的需要 - 将为隐藏的内容保留空间。应用绑定时页面不会“跳转”。

于 2017-10-10T09:04:50.720 回答