0

HTMLテンプレートに次のボタンがあり、CanCanceltrueの場合にのみ表示します。

<button data-bind="click: CancelProject, visible: CanCancel">Cancel Project</button>

問題は、モデルのバインドに1〜2秒かかるため、実際にボタンが数秒間表示され、データが完全にバインドされるとボタンが消えることです。ボタンを非表示にして、 trueの場合は表示したい。CanCancel

CSSを使用してボタンの初期状態を設定しようとしました。

<button class="hidden" data-bind="click: CancelProject, visible: CanCancel">Cancel Project</button>

そして私のCSSでは：

DIV.buttons button.hidden { display: none; }

しかし、そうするとボタンが見えなくなります。これはdisplay: inherit;、値がtrueの場合、Knockout.jsがボタンのインラインスタイルをオーバーライドしないためです。

Knockoutにインライン表示スタイルを明示的に設定させる方法はありますか？

4

3 に答える 3

2

わかりました。これを修正する簡単な方法をいくつか見つけました。おそらく最も簡単なのは、スタイルバインディングを使用することです。

<button class="hidden" data-bind="click: CancelProject, style: { display: CanCancel ? 'inherit' : 'none' } ">Cancel Project</button>

CSSセレクターはhidden初期状態を非表示に設定し、モデルがバインドされると、バインドされたインラインスタイルがこれをオーバーライドします。

2番目の方法はもう少し柔軟かもしれません。<body>タグにCSSクラスを追加しました：

<body class="loading">

これで、ページの読み込み中に特定の要素を非表示にできます。

BODY.loading DIV.buttons { display: none; }

最後に、データをバインドするときに、クラスを削除できます。

ko.applyBindings(model);
$(document.body).removeClass('loading');

これにより、純粋なCSSを使用してページが読み込まれるときに、さまざまな要素がどのように動作するかを正確に制御できます。

于 2013-03-21T20:14:30.730 に答える
1

これに対する迅速で汚い解決策は次のとおりです。

<button class="hidden" data-bind="click: CancelProject, style: { display: CanCancel ? 'inherit' : ''}">Cancel Project</button>

スタイルバインディングの詳細については、こちらをご覧ください。

とはいえ、それは迅速で汚いので、より大きなプロジェクト/フレームワークで作業している場合は、マットの答えを使用することをお勧めします。

于 2013-03-21T20:11:21.160 に答える
1

私は通常、ノックアウトによってバインドされるすべてのものをdivセットでラップしてからdisplay:none、（たとえば）の直後にjQueryで表示するかko.applyBindings、カスタムノックアウトバインディングを使用してloaded、readyまたは同様のプロパティにリンクして表示します。 （VMにAJAXを介したデータのロードが含まれる場合に便利です）またはwithビューモデルのバインディングだけでもかまいません。

.show()これは、最初に次のように設定されている場合でも、jQueryを使用して要素を表示する単純なカスタムバインディングですdisplay:none。

ko.bindingHandlers["realVisible"] = {
    init: function(element, valueAccessor) {
        var val = ko.utils.unwrapObservable(valueAccessor());
        if (val) {
            $(element).show();
        }
        else {
            $(element).hide();
        }
    },
    update: function(element, valueAccessor) {
        var val = ko.utils.unwrapObservable(valueAccessor());
        if (val) {
            $(element).show();
        }
        else {
            $(element).hide();
        }
    }
}

これがデモフィドルです

于 2013-03-21T19:48:16.253 に答える