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

Question

我遇到一个问题，当对项目应用 CSS 样式时，knockout.js 2.0 不显示我的项目。它不会使用所应用的样式来更新显示。如果它关闭，则可以工作。

CSS

.success { display:none }

HTML

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

JS

app.viewModel.site.signUp.success(true);

Answer 1

在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>

Answer 2

我创建了一个小提琴，展示了如何使用 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>

http://jsfiddle.net/johnpapa/vwcfT/ 示例仅使用可见绑定，因为您实际上并不需要 css 类来执行此操作。如果 site.signUp.success observable 为 true，则示例中的第二个 DIV 绑定到名为“success”的 css 类。这比第一个更详细，但如果您需要 css 类做的不仅仅是设置可见性，这可能会很有用。

希望这有帮助。

这是 JavaScript：

var viewModel = {
    site: {
        signUp: {
            success: ko.observable(true)
        }
    }
};

ko.applyBindings(viewModel);

Answer 3

这是因为成功样式定义为 display:none，相当于 visible = false。您的 CSS 类正在取消您的 site.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>

Answer 4

可能有点晚了，但我发现以下内容很有用。无需使用可见性控件来修复每个元素，只需将 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 应用绑定后才显示。我通常用它包裹整个页面以避免任何闪烁问题。

Answer 5

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

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< 时它将具有块显示/code> 已应用。然而，这个简单的解决方案非常适合我的用例。