Knockout.js 如何防止在执行敲除绑定之前显示Html

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

<!-- kno ifnot: bla -->

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

<!-- /ko -->

一些东西

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

---

如何防止这种情况发生？

用类似的方式包装您的html-

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

---

这是我发现的最简单有效的方法。您可以使用一些击倒绑定来实现这一点，但由于无法控制订单绑定的执行，您会失去时间保证。

这里有一个简单的技巧。只需将根元素初始隐藏，并将visible绑定设置为true

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

渲染时，在knockout执行其操作之前，它最初将被隐藏。应用绑定时，knockout将覆盖样式并使其可见

---

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

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

---

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

在测试过程中，当应用绑定时，我会添加一个超时，以便可以看到闪存

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

 }, 300);

---

另一个解决方案，我找到了

---

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

我喜欢这比Tom的解决方案更好，因为它只依赖敲除来取消隐藏HTML。这正是我最后所做的（然后在这里检查并使用相同的解决方案）使用引导

d-none

时，这对我不起作用。请注意，只有使用内联样式设置

display:none

时，这才起作用。（背景：通过类样式隐藏元素不起作用，因为当通过绑定使元素可见时，Knockout会删除

显示

内联样式。然后您的类样式将接管并永远隐藏元素。）这是一个相对不错的解决方案，有很多希望，尽管作为一个可重用的击出绑定会更好。不过，我们需要确保它是第一个被评估的绑定。

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

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

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