Question

我使用敲除来显示元素。这是一个简单的例子：

HTML

<p data-bind="text:userName, visible:userLoggedIn"></p>

CSS

p {
    width:1000px;
    height:1000px;
    background:green;
}

JS

var vm = {
    userName:ko.observable('peter'),
    userLoggedIn:ko.observable(false)
}

ko.applyBindings(vm)

问题是，淘汰需要一些时间来确定不显示该元素并使用display:none隐藏它。这段时间非常短（不到一秒钟，具体取决于页面的复杂程度），但是当元素闪烁时，它看起来并不好看。我无法在CSS中创建元素display:none，因为出于某种原因，knockout不能用display:block覆盖该样式。我所知道的唯一解决方案是在元素style="display:none"上添加内联样式。这种方法还有其他替代方案吗？

Answer 1

Knockout在'visible'为false时添加动态样式显示元素，并在visible为true时将其删除。这就是为什么显示：css中没有任何东西正在重新开始，你的元素永远不会显示出来。

您需要将其更改为css绑定，如此

<强> HTML

<p data-bind="text:userName, css:isDisplayed"></p>

<强> CSS

p {
    width:1000px;
    height:1000px;
    background:green;
    display: none;
}

.shown{
    display: block;
}

<强> KNOCKOUT

var vm = {
    userName:ko.observable('peter'),
    userLoggedIn:ko.observable(true) 
}

vm.isDisplayed = ko.computed(function(){
    return this.userLoggedIn() ? "shown" : "";
}, vm);

ko.applyBindings(vm)

注意计算函数，它添加显示的类来覆盖CSS。

这是一个小提琴 http://jsfiddle.net/Ky4EM/

希望这有帮助

淘汰闪烁元素 - style =“display：none”的替代品

1 个答案: