如何防止在执行敲除绑定之前显示HTML

70

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

<!-- kno ifnot: bla -->

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

<!-- /ko -->

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

如何防止这种情况发生？

knockout.js

— 神酷
source

156

这是一个简单的把戏。只需将您的根元素初始隐藏，然后将可见绑定设置为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>

— 杰夫·梅卡多（Jeff Mercado）
source

10

与Tom的解决方案相比，我更喜欢这种解决方案，因为它仅依赖于剔除来取消隐藏HTML。

— Kyeotic

正是我最终所做的事情（然后在此处检查并返回相同的解决方案； S）

— shenku 2012年

使用bootstrap时，这对我不起作用d-none。

— 乔什·古斯特

1

请注意，这仅在使用内联样式进行设置时有效display: none。（背景：因为通过淘汰赛类样式隐藏元素不起作用删除了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
}

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

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

 }, 300);

— 西蒙·韦弗
source

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

— 约翰·扎布罗斯基

1

将您的html包裹成这样-

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

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

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

这是我发现可行的最简单的方法。您可以使用一些敲除绑定来执行此操作，但是由于无法控制订单绑定的执行，因此失去了保证的时间。

— photo_tom
source

0

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

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

根据您的需要，这具有优点（或缺点）–将为隐藏的内容保留空间。应用绑定后，该页面不会“跳转”。

— 克劳斯·奥莱·克里斯蒂安森
source