Нокаут JS: Стоп divs привязан к видимым: от мигания на экране

Я работаю над одностраничными приложениями, у которых есть куча скрытых div, привязанных (или связанных с ними?) к KnockoutJS с visible:. Когда страница загружается, все они мгновенно мигают на экране. Я попытался переместить мой JS в <head></head>, но это не повлияло, поэтому загрузка JS в нижней части страницы не вызывает его.

К сожалению, привязка visible: не распространяется на атрибут CSS display, поэтому я не могу использовать display: none; при загрузке страницы, или visible: вообще не работает. Если... Я загружаю страницу с помощью display: none;, а затем меняю ее в первый раз, когда я показываю div пользователю.

Но есть ли более элегантный способ достичь этого?

Ответ 1

Wth KnockoutJS, я обойду эту проблему, определив класс CSS с именем hidden с display:none, тогда я добавлю этот класс и привяжу к мигающему контейнеру:

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

Ответ 2

Я решил это, поставив свой "яркий" контент в шаблон script и используя виртуальные элементы 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 установлен, содержимое контейнера script будет помещено вместо виртуального элемента шаблона. С помощью этого метода вы не видите ни одного мигающего содержимого: -)

Ответ 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>