3

Knockout.jsを使用して、サーバーから返された検索結果のリストを表示しています。結果セットの各結果には画像が含まれています。すべての画像の最大高さに基づいて画像の親divのサイズを変更できるように、各画像のloadイベントにハンドラーをアタッチしようとしていますが、画像の読み込みが完了する前にloadイベントが発生しているようです。

さらに、Firebugでロードハンドラーがヒットしていることがわかりますが、デバッグの動作はイメージをロードする時間を与えるだけなので、デバッグ時にすべてが正しく機能します。

viewModel内のロードハンドラー：これにより、解決済みの遅延がpromise配列にプッシュされます。次に、配列がいっぱいになっていることを確認するだけで、画像が読み込まれたことがわかります。

self.imageLoadHandler = function() {
    var promise = $.Deferred().resolve;
    promises.push(promise);
};

ロードハンドラのバインディング

<img data-bind="attr: { src: Posters.Detailed, alt: Title }, event: { load: $root.imageLoadHandler }" />

私のviewModel内の検索関数：これはjsonの結果を返し、監視可能な配列にデータを入力し、最初にpromise配列がいっぱいであることを確認して各「サムネイル」の高さを設定し、いっぱいになると最大の高さを取得して設定しますその高さまでのすべての「サムネイル」。

self.search = function () {
    $.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) {
        self.movies(data);
        setThumbnailHeight();
    });
};

var setThumbnailHeight = function() {
    var $items = $('.thumbnails li');
    $.when.apply($, promises).done(function() {
        var maxHeight = Math.max.apply(null, $items.map(function () {
            return $(this).height();
        }).get());
        $items.css('height', maxHeight);
    });
};

私の質問は、画像が読み込まれる前にloadイベントが発生するのはなぜですか？また、適切なタイミングでloadイベントを発生させるにはどうすればよいですか？

アップデート

私の考えでは、ロードイベントは、イメージにアタッチされた後にアタッチされる可能性があるため、時期尚早に発生する可能性がありますsrc。イベントバインディングの順序を変更するだけではうまくいかない場合は、カスタムバインディングを作成する必要があるかもしれません。

4

1 に答える 1

5

event:データの前にデータを置くだけで、イベント バインディングの問題を解決できる場合がありattr:ます。

いずれにせよ（しゃれは意図していません）、この行は間違っています：

var promise = $.Deferred().resolve;

deferred を作成し、関数を呼び出さずに関数promiseへの参照として割り当てます。resolve

結果の配列が結合された promise に渡されると$.when、それ自体がインターフェイスを実装していないオブジェクトpromiseは暗黙的に解決済みと見なされるため、すぐに解決されます。

の外側に（目的の長さの）遅延オブジェクトの配列を作成し、その時点で適切な遅延オブジェクトをimageLoadHandler明示的に呼び出す必要があります。.resolve()

于 2012-11-20T13:54:24.453 に答える