24

。を使用してKnockoutJSにバインドされた（またはバインドされた）非表示のdivが多数あるシングルページアプリケーションに取り組んでいますvisible:。ページが読み込まれると、それらはすべて画面上で瞬間的に点滅します。JSをに移動しようとしました<head></head>が、効果がなかったため、ページの下部にJSをロードしても問題は発生しません。

残念ながら、バインディングはCSS属性にvisible:伝播しないため、ページの読み込み時に使用できないか、まったく機能しません。を除いて...ページをロードしてから、初めてdivをユーザーに表示するときにページを変更します。displaydisplay: none;visible:display: none;

しかし、これを達成するためのよりエレガントな方法はありますか？

4

3 に答える 3

57

KnockoutJSでは、で呼び出されるCSSクラスを定義することでこの問題を回避hiddenし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 に答える