Question

我试图使用Knockout.js显示/隐藏基于某些属性的html元素，但我得到的是闪烁。独立于属性值，所有元素都在加载时显示，并且在其中一些元素被隐藏之后显示。

这是我的剧本：

  <li class="page-scroll" data-bind="if: !loggedIn()">
                    @Html.ActionLink(@ViewRes.SharedStrings.login, "User", "Home")
                </li>

  <li class="page-scroll" data-bind="if: loggedIn()">
                    <a href="#" data-bind="text: user().name, click: user().manage">
                    </a>
                </li>

问题是如何制作淘汰赛，将所有元素添加到DOM并隐藏它们之后，根本不添加它们。我甚至试过这个剧本：

<li class="page-scroll" data-bind="if: false">                        
                    <a href="#" data-bind="click: user().manage" 
                       style=" background: url(/Content/img/vahagn.jpg) no-repeat center left; background-size: contain; border-radius: 30px; width: 60px; height: 60px; margin-left: 25px;">
                    </a>                                                                                       
                </li>

此元素也在加载过程中显示。我也试过这个语法

 <!-- ko if: loggedIn()-->
my elements
 <!-- /ko -->

在这种情况下也是如此。

任何解决方案？

Answer 1

将类添加到具有数据绑定元素的所有容器中。有点像...

hide-unbound

它的风格为：display: none

然后，在ko.applyBindings(new MyViewModel());之后调用类似......

$(".hide-unbound").removeClass("hide-unbound");

Knockout.js如果只在加载后工作。为什么？

1 个答案: