24

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

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

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

4

3 回答 3

57

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

class="hidden" data-bind="css: { hidden: false }"
于 2012-10-08T05:31:42.747 回答
5

我通过将我的“华丽”内容放在脚本模板中解决了这个问题，并在变量由另一个虚拟元素设置时使用 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 设置时，脚本容器的内容将被放置在模板虚拟元素的位置。使用这种方法，您不会看到任何闪烁的内容 :-)

于 2013-04-15T15:05:11.347 回答
0

我最终编写了一个自定义绑定来使用而不是默认的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>
于 2016-07-08T08:48:35.103 回答