Question

我在我的Html中使用以下敲除脚本：

<!-- kno ifnot: bla -->

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

<!-- /ko -->

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

如何防止这种情况发生？

Answer 1

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

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

正如它所呈现的那样，在淘汰赛之前，它会被隐藏起来。当应用绑定时，knockout将覆盖样式并使其可见。

或者，您可以将视图放入脚本块并通过模板实例化它。脚本块不会被渲染，但是当knockout呈现模板时将会显示。

<!-- ko template: 'myView' --><!-- /ko -->
<script id="myView" type="text/html">
    <!-- the rest of your stuff -->
</script>

Answer 2

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

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

绑定页面时：

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

然后，在不需要的内容出现问题的页面中，我可以根据这两个类自定义css来显示或隐藏内容。我也使用这种技术来显示“加载”＃39;图像或者可能对元素施加最小高度。

.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);

Answer 3

用这样的东西包装你的HTML -

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

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

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

这是我发现最简单的方法。你可以用一些敲除绑定来做到这一点，但你失去了保证的时间，因为你无法控制订单绑定的执行。

Answer 4

另一种解决方案，我找到了here

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

根据您的需要，这具有优势或劣势 - 将为隐藏内容保留空间。应用绑定时，页面不会“跳转”。

如何防止在执行knockout绑定之前显示Html

4 个答案: