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

【问题标题】：How can I hide page elements by default but later show them with Knockout?如何在默认情况下隐藏页面元素，但稍后使用 Knockout 显示它们？
【发布时间】：2013-01-31 19:19:06
【问题描述】：

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

问题是当页面加载时——当 HTML 已经加载但 Knockout 还没有应用它的绑定时——所有的部分都是可见的。这持续了不到一秒钟，但它是难看的。我试图在这些部分上设置display: none，以便它们最初是不可见的，但是Knockout's visible binding 有一个怪癖：如果表达式的计算结果为真，则 Knockout 将 CSS display 属性设置为没有 Knockout 的任何内容.

换句话说，设置data-bind="visible: true" 不会覆盖display: none。这是有道理的，因为在某些情况下，您经常需要将显示指定为不可见或table-cell，但在我的情况下这很烦人。强制 Knockout 显示我的部分元素的最佳方式是什么？

【问题讨论】：

顺便说一句，使用if:而不是visible:不是更好吗？

标签： html knockout.js

【解决方案1】：

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

body > section {
    display: none;
}

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

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

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

【讨论】：