0

いくつかのアイデアを得るために Google を検索していて、いくつかのコードを見つけましたが、不完全で理解しにくいものです。ノックアウトを使用して画像のリストをバインドしたいと考えています。

画像の読み込み中にスピナーの背景を設定する最良の方法は何ですか? 背景画像に設定および設定解除できるスピナークラスがあります。

ここにコードがありますが、明確ではありません

 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
        }
    };

and then use it like

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

アップデート

    <img src="http://www.aero-sa.com/images/ajax-loader.gif" data-bind="visible:loading" />
var model = function() {
    var self = this;
    this.loading =  ko.observable(true);
    setTimeout(function() {
        self.loading(false);
    }, 4000);
}
ko.applyBindings(new model());

上記のコードについていくつか質問があります。ここは何ですか？これは何を指していますか？次のようなコードを書くと、画像が非表示になりません....なぜこれが機能しないのですか。

var model = function() {
        //var self = this;
        this.loading =  ko.observable(true);
        setTimeout(function() {
            this.loading(false);
        }, 4000);
    }
    ko.applyBindings(new model());

可能であれば説明してください。

4

1 に答える 1

0

同様の問題がありました。私の場合、ブロック内の画像を読み込めなかった場合、HTML のブロック全体を非表示にする必要がありました。最終的には imagesLoaded ライブラリ ( https://github.com/desandro/imagesloaded ) を使用し、これをノックアウト カスタム バインディングでラップしました。

function tryRegisterEvent(imgLoad, event, handler) {
    if (handler === undefined) return;

    imgLoad.on(event, handler);
}

function tryRegisterEvents(imgLoad, events, bindings) {
    for (var i = 0; i < events.length; ++i) {
        var event = events[i];
        tryRegisterEvent(imgLoad, event, bindings[event]);
    }
}

ko.bindingHandlers['imagesLoaded'] = {
    'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (imagesLoaded === undefined) {
            throw new Error('imagesLoaded is not defined');
        }

        var bindings = ko.utils.unwrapObservable(valueAccessor());

        var imgLoad = imagesLoaded(element);

        tryRegisterEvents(imgLoad, ['always', 'done', 'fail', 'progress'], bindings);
    },
    'update': function () {}
};

次に、次のように、HTML でこのバインディングを使用できます。

<div data-bind="visible: isLoading() || isLoaded()">
    Some more HTML and text...
    <img src="..." data-bind="imagesLoaded: { done: function () { isLoaded(true); }, always: function () { isLoading(false); } }" />
</div>

最初に と を設定するisLoadingとtrue、イベント ハンドラーは、画像の読み込みステータスに基づいて、ビュー モデルの状態を適宜変更します。isLoadedfalse

imagesLoaded ライブラリは、単一の画像ではなくコンテナで動作する (コンテナ内のすべての画像を監視する) ことができるため、すべての画像ギャラリーを含む親要素でこのカスタム バインディングを使用し、スピナーを表示してalwaysイベント時に非表示にすることができます。がトリガーされます。

于 2014-02-19T09:27:41.400 に答える