Knockout JS：停止绑定到可见的 div：从屏幕上闪烁答案

【问题标题】：Knockout JS: Stop divs binded to visible: from flashing on screenKnockout JS：停止绑定到可见的 div：从屏幕上闪烁
【发布时间】：2012-10-08 05:25:45
【问题描述】：

我正在开发具有一堆隐藏 div 的单页应用程序，这些 div 使用 visible: 绑定（或绑定？）到 KnockoutJS。当页面加载时，它们都会在屏幕上瞬间闪烁。我曾尝试将我的 JS 移动到 <head></head>，但这没有任何效果，因此在页面底部加载 JS 并不是导致它的原因。

不幸的是，visible: 绑定不会传播到 CSS display 属性，所以我不能在页面加载时使用display: none;，或者visible: 根本不起作用。除非...我用display: none; 加载页面，然后在我第一次向用户显示div 时更改它。

但是有没有更优雅的方法来实现这一点？

【问题讨论】：

What is the best way to hide the screen while knockout js bindings are being built? 的可能重复项

标签： jquery knockout.js knockout-2.0

【解决方案1】：

使用 KnockoutJS，我通过使用 display:none 定义一个名为 hidden 的 CSS 类来解决这个问题，然后我将添加这个类并绑定到闪烁的容器：

class="hidden" data-bind="css: { hidden: false }"

【讨论】：

这正是我所需要的！谢谢！
确实很漂亮。我对此做了一个小的调整，并将“隐藏”替换为“ko-hidden”，只是为了获得更多上下文并避免踩到现有的“隐藏”类：class="ko-hidden" data-bind="css: { 'ko-hidden': false }"
值得注意的是 bootstrap 3 有一个 .hidden 类。 getbootstrap.com/css/#helper-classes-show-hide
@crush 因为绑定直到你调用 applyBindings 才会生效。
@Tuan 这根本不是我要说的。在您通过 CSS 类应用 display: none 的情况下，当绑定到的 observable 为 true 时，visible 绑定将不起作用。当visible 绑定的绑定值评估为真时，它只是设置element.style.display = ''，这有效地从元素中删除style="display: none"。然后，应用具有 display: none 的底层 CSS 类 - 因此该元素永远不会显示。因此，唯一的解决方法是使用style="display: none"，而不是类或特殊的演示类。

【解决方案2】：

我通过将我的“华丽”内容放入脚本模板中解决了这个问题，并在变量由另一个虚拟元素设置时使用 ko 的虚拟元素加载模板。

例如：

<!-- ko if: myVariable -->
<!-- ko template: { name: 'myTemplate' } --><!-- /ko -->
<script type="text/html" id="myTemplate">
    <ul data-bind="foreach: blah...">
        <li></li>
    </ul>
</script>
<!-- /ko -->

所以当 myVariable 被设置时，脚本容器的内容将被放置在模板虚拟元素的位置。使用这种方法，您不会看到任何闪烁的内容:-)

【讨论】：

这有一个好处是不把 display:none 放在所有东西上（当其他人删除数据绑定时，他们可能不记得删除 display:none

【解决方案3】：

我最终编写了一个自定义绑定来代替默认的visible。

function isHidden(el) {
    var style;

    style = window.getComputedStyle(el);

    return (style.display === 'none')
}

ko.bindingHandlers['cssVisible'] = {
    'update': function (element, valueAccessor) {
        var value,
            isCurrentlyVisible;

        value = ko.utils.unwrapObservable(valueAccessor());
        isCurrentlyVisible = !isHidden(element);

        if (value && !isCurrentlyVisible) {
            ko.utils.toggleDomNodeCssClass(element, 'ko-visible', true);
        }
        else if ((!value) && isCurrentlyVisible) {
            ko.utils.toggleDomNodeCssClass(element, 'ko-visible', false);
        }
    }
}

然后是一些 CSS 来处理可见性

[data-bind*="cssVisible"]:not(.ko-visible) {
    display: none;
}

用法同visible绑定

<div data-bind="cssVisible: true"></div>

【讨论】：