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

Question

我正在使用Knockout和jQuery开发一个单页的Web应用程序.页面的主体被分成不同的<section>s,每个s对应于某个页面; 用户一次只能看到一个部分.我们正在使用Knockout的visible绑定来隐藏和显示适当的部分,并且它工作正常.

问题是当页面加载时 - 当HTML加载但Knockout尚未应用其绑定时 - 所有部分都是可见的.这持续不到一秒钟,但它是不雅观的.我尝试设置display: none这些部分,以便它们最初是不可见的,但是Knockout的visible绑定存在一个怪癖:如果表达式的计算结果为true,则Knockout将CSS display属性设置为没有Knockout的情况.

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

Answer 1

事实证明,虽然Knockout不会覆盖display: noneCSS中的一个集合,例如

body > section {
    display: none;
}

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

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

因此,我的问题的解决方案是将display: noneCSS文件移动到style属性中.Knockout然后覆盖属性以显示我<section>希望它显示的时间.