javascript - ノックアウト.jsで画像読み込みスピナーを表示する方法

Question

ノックアウトを使用して画像のリストをバインドしています。画像の読み込み中にスピナーの背景を設定する最良の方法は何ですか? 背景画像に設定および設定解除できるスピナー クラスがありますが、knockout.js を使用して画像完了イベントにバインドする簡単な方法があるかどうか疑問に思っています。

Answer 1

jquery UIの小さなスピナーを使用して、次のようなバインディングハンドラーを持っています

 ko.bindingHandlers.Loading = {
        update: function (element, valueAccessor, allBindingsAccessor) {
            var value = valueAccessor(), allBindings = allBindingsAccessor();
            var valueUnwrapped = ko.utils.unwrapObservable(value);

            if (valueUnwrapped == true)
                $(element).showLoading(); // Make the element visible
            else
                $(element).hideLoading();   // Make the element invisible
        }
    };

そしてそれを次のように使用します

<div data-bind="Loading: isLoading" >

したがって、基本的には、ビューモデルの読み込み中 (またはビジー) を表しているかどうかに関係なく、ビューモデルの任意のものにバインドできます。