Привязка события Knockoutjs к событию загрузки изображения

Я использую Knockout.js для отображения списка результатов поиска, возвращаемых с моего сервера. Каждый результат из набора результатов содержит изображение. Я пытаюсь прикрепить обработчик к событию загрузки для каждого изображения, чтобы я мог изменить размер родительского div изображения на основе максимальной высоты всех изображений, но событие загрузки, похоже, срабатывает до того, как изображения завершили загрузку.

Кроме того, я вижу, что обработчик загрузки попадает в firebug, но процесс отладки просто дает изображениям время для загрузки, поэтому при отладке все работает правильно.

Обработчик нагрузки в моей модели просмотра: это поместит разрешенный отложенный объект в мой массив обещаний. Затем все, что мне нужно сделать, это проверить, чтобы убедиться, что массив заполнен, и это скажет мне, что изображения загружены.

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

Привязка для обработчика нагрузки

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

Функция поиска в моей модели просмотра: она возвращает результаты json, заполняет наблюдаемый массив, а затем устанавливает высоту каждой «миниатюры», сначала проверяя, чтобы убедиться, что массив обещаний заполнен, а затем, когда он , получает максимальную высоту и устанавливает все «эскизы» на эту высоту.

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

У меня вопрос: почему событие загрузки срабатывает до загрузки изображения и как я могу активировать событие загрузки в подходящее время?

ОБНОВЛЕНИЕ

Я считаю, что событие загрузки может срабатывать преждевременно, потому что возможно, что оно прикреплено после того, как изображение имеет его src. Возможно, мне придется создать настраиваемую привязку, если простое изменение порядка привязок событий не работает.


javascript event-handling knockout.js jquery-deferred
person bflemi3    schedule 20.11.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете решить проблему привязки событий, просто поместив данные event: перед данными attr:.

В любом случае (без каламбура) эта строка неверна:

var promise = $.Deferred().resolve;

он создает отложенную функцию, а затем назначает promise как ссылку на функцию resolve, не вызывая ее.

Когда результирующий массив передается в $.when, объединенное обещание разрешается немедленно, поскольку объекты, которые сами не реализуют интерфейс promise, неявно считаются разрешенными.

Вам необходимо создать массив отложенных объектов (желаемой длины) за пределами imageLoadHandler, а затем явно вызвать .resolve() для соответствующего отложенного объекта в этой точке.

person Alnitak    schedule 20.11.2012
comment
Спасибо Альнитак. Я не смогу протестировать это до сегодняшнего вечера, но похоже, что это может быть причиной моей проблемы. Я дам Вам знать :) - person bflemi3; 20.11.2012
comment
Да в порядке привязки. Я тоже собираюсь попробовать это. - person bflemi3; 20.11.2012