Javascript 应用css样式时knockout.js可见性不起作用

我遇到了一个问题，当应用CSS样式时，knockout.js2.0没有显示我的项目。它不会使用应用于它的样式更新显示。如果它关闭，它就会工作

CSS

HTML

---

这是因为成功样式定义为

display:none

，这相当于

visible=false

。您的CSS类正在取消您的

站点.signUp.success（）

调用

如果希望DIV仅在

site.signUp.success（）==true

时显示，只需执行以下操作：

<div data-bind="visible: site.signUp.success">
    Thanks for signining up.  You will recieve an email from us in the near future.
</div>

谢谢你的注册。您将在不久的将来收到我们的电子邮件。

我创建了一个提琴，展示了如何在Knockout中使用css绑定来实现这一点

以下是HTML：

Success Flag: <input type="checkbox" data-bind="checked:site.signUp.success"></input>
<div data-bind="visible: site.signUp.success" >
    Thanks for signining up.  You will recieve an email from us in the near future.
</div>

<br/><br/>
<span data-bind="text:site.signUp.success"></span>
<div data-bind="css: { success: site.signUp.success}" >
    Thanks for signining up.  You will recieve an email from us in the near future.
</div>

---

在Knockout.js应用绑定之前的一段时间内，可以通过将默认显示样式设置为

none

来防止初始渲染/闪烁效果

 <div style="display: none" data-bind="visible: site.signUp.success">
     Thanks for signining up.  You will recieve an email from us in the near future.
 </div>

谢谢你的注册。您将在不久的将来收到我们的电子邮件。

可能有点晚了，但我发现以下内容很有用。与使用可见性控件修复每个元素不同，只需在所有预隐藏的元素周围环绕一个div，如下所示：

<div style="display:none" data-bind="visible: true">
    Some pre-hidden elements
    <div data-bind="visible: myVisibleFoo">...</div>
    <div data-bind="visible: myVisibleBar">...</div>
    Other pre-hidden elements
    ...
</div>

一些预先隐藏的元素
...
...
其他预隐藏元素
...

---

元素的整个部分最初是隐藏的，只有在KO应用了绑定之后才会显示。我通常用它来包装整个页面，以避免出现任何闪烁问题。

我自己也会遇到这个问题；我可以理解为什么这样做，但是在页面上晚加载的元素上设置默认的可见性none是很方便的，这样它们就不会在加载脚本时闪烁。我能找到的最好的方法就是创建一个简单的自定义绑定：

ko.bindingHandlers.forceVisible = {
    update:
        function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
        {
            if(ko.unwrap(f_valueaccessor()))
                el.style.display = 'inherit';
            else
                el.style.display = 'none';
        }
};

---

在设置样式时，你必须稍微小心一点；如果您使用的是

div

，并且CSS将其设置为

display:inline block

，则此代码将不起作用-当应用

inherit

时，它将具有块显示。然而，对于我的用例来说，这个简单的解决方案很好。

但在加载时，它很快就会显示出来。这在旧版本中没有发生。何时应用绑定？加载所有内容后，在页面末尾。如果您想测试它，请转到，键入一封假电子邮件，然后按enter键。应该会显示一条成功消息，但即使它在页面上仍然隐藏，它也不会显示。它已经在页面底部$（document）.ready（函数（）{app.applyBindings（）；}）；有趣。看来约翰·帕帕已经在另一个答案中解决了这个问题。祝你好运。我几乎觉得这是一个bug，虽然文档确实说CSS显示样式仍然与可见绑定一起工作。我面临的主要问题是，我发现编写CSS绑定非常困难，并且破坏了可视绑定的许多有用性，因为我的页面中没有CSS绑定就会出现闪烁的元素。这也是我必须做的。它吮吸着我身上的每一根骨头，刺痛着我的每一根骨头，但哦，好吧。@DerekPeterson我完全同意，它似乎真的在那里粘上了

风格
属性。感觉你在创作一封HTML电子邮件或其他东西。
var viewModel = {
    site: {
        signUp: {
            success: ko.observable(true)
        }
    }
};

ko.applyBindings(viewModel);

 <div style="display: none" data-bind="visible: site.signUp.success">
     Thanks for signining up.  You will recieve an email from us in the near future.
 </div>

<div style="display:none" data-bind="visible: true">
    Some pre-hidden elements
    <div data-bind="visible: myVisibleFoo">...</div>
    <div data-bind="visible: myVisibleBar">...</div>
    Other pre-hidden elements
    ...
</div>

ko.bindingHandlers.forceVisible = {
    update:
        function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
        {
            if(ko.unwrap(f_valueaccessor()))
                el.style.display = 'inherit';
            else
                el.style.display = 'none';
        }
};