javascript - Knockoutjs 事件绑定(bind)到图像加载事件

Question

我正在使用 Knockout.js 来显示从我的服务器返回的搜索结果列表。结果集中的每个结果都包含一个图像。我正在尝试将一个处理程序附加到每个图像的加载事件，以便我可以根据所有图像的最大高度调整图像的父 div 的大小，但加载事件似乎在图像完成加载之前触发。

此外，我可以看到加载处理程序在 firebug 中被命中，但调试行为只是让图像有时间加载，因此调试时一切正常。

我的 viewModel 中的负载处理程序:这会将已解析的延迟推送到我的 promises 数组中。然后我所要做的就是检查以确保数组已满，这将告诉我图像已加载。

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

负载处理器的绑定(bind)

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

我的 viewModel 中的搜索功能:这将返回 json 结果，填充我的可观察数组，然后通过首先检查以确保 promises 数组已满来设置每个“缩略图”的高度，然后如果是，获取最大高度并将所有“缩略图”设置为该高度。

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 之后附加的。如果只是更改事件绑定(bind)的顺序不起作用，我可能必须创建自定义绑定(bind)。

Answer 1

您可以简单地通过将 event: 数据放在 attr: 数据之前来解决事件绑定(bind)问题。

无论如何(没有双关语意)这一行是错误的:

var promise = $.Deferred().resolve;

它创建一个 deferred，然后将 promise 作为对 resolve 函数的引用，而不调用它。

当结果数组传递给 $.when 时，组合的 promise 会立即得到解决，因为本身没有实现 promise 接口(interface)的对象被隐式地视为已解决。

您需要在 imageLoadHandler 之外创建延迟对象数组(所需长度)，然后在适当的延迟对象上显式调用 .resolve()那时。