如何在默认情况下隐藏页面元素，但稍后使用Knockout显示它们？

Question

我正在使用Knockout和jQuery开发一个单页面的Web应用程序。页面正文分为不同的<section>个，每个visible s对应一个页面;用户一次只能看到一个部分。我们使用Knockout的display: none绑定来隐藏和显示适当的部分，并且它工作正常。

问题在于，当页面正在加载时 - 当HTML加载但Knockout尚未应用其绑定时 - 所有部分都是可见的。这持续不到一秒钟，但它是不雅观的。我尝试在部分上设置display，以便它们最初是不可见的，但是有一个Knockout's visible binding的怪癖：如果表达式的计算结果为true，则Knockout将CSS data-bind="visible: true"属性设置为它本来没有Knockout。

换句话说，设置display: none不会覆盖table-cell。这是有道理的，因为通常情况下你需要将显示指定为不可见或者说{{1}}，但在我的情况下它很烦人。强制Knockout显示我的节元素的最佳方法是什么？

Answer 1

事实证明，虽然Knockout不会覆盖CSS中的display: none集，例如

body > section {
    display: none;
}

如果它出现在HTML本身中，将将覆盖相同的样式指令：

<section style="display: none" data-bind="...">

因此，我的问题的解决方案是将display: none从CSS文件移动到style属性。当我想要显示时，Knockout会覆盖该属性以显示我的<section>。