Question

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

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

但有没有更优雅的方法来实现这一目标？

Answer 1

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

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

Answer 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时，脚本容器的内容将被放置在模板虚拟元素的位置。使用此方法，您不会看到任何闪烁的内容： - ）

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

Knockout JS：阻止divs绑定到可见：从屏幕上闪烁

3 个答案: