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绑定来完成此任务。 http://jsfiddle.net/johnpapa/vwcfT/

这是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>

示例中的第一个DIV只使用可见绑定，因为你真的不需要一个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

亲自碰到这个;我可以看到为什么这样做了，但是在页面上的后期加载元素上设置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时，它将显示块。然而，这个简单的解决方案适用于我的用例。

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

5 个答案: