如何防止在执行敲除绑定之前显示 Html答案

【问题标题】：How to prevent Html showing before knockout binding is executed如何防止在执行敲除绑定之前显示 Html
【发布时间】：2017-10-10 17:33:10
【问题描述】：

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

<!-- kno ifnot: bla -->

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

<!-- /ko -->

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

如何防止这种情况发生？

【问题讨论】：

标签： knockout.js

【解决方案1】：

这是一个简单的技巧。只需让您的根元素最初隐藏并将可见绑定设置为 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>

【讨论】：

我比 Tom 的解决方案更喜欢这个，因为它只依靠敲除来取消隐藏 HTML。
正是我最终做的事情（然后在这里查看并找到相同的解决方案；S）
使用引导程序d-none时这对我不起作用。
请注意，这仅在您使用 inline 样式设置display: none 时有效。（背景：通过类样式隐藏元素不起作用，因为当通过绑定使元素可见时，Knockout 删除 display 内联样式。然后你的类样式将接管并永远隐藏元素。）

【解决方案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
}

在测试期间，在应用绑定时，我会添加一个超时，以便我可以看到 flash。

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

 }, 300);

【讨论】：

这是一个相对不错的解决方案，有很多希望，尽管作为可重复使用的敲除绑定会更好。不过，我们需要确保它是第一个评估的绑定。

【解决方案3】：

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

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

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

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：