Knockoutjs事件绑定到图像加载事件

Question

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

此外，我可以在Firebug中看到加载处理程序被触发，但是调试的过程中会给图像足够的时间来加载，因此一切正常。

viewModel中的加载处理程序：这将向我的promises数组推送已解决的deferred对象。然后，我只需检查数组是否完整即可确定图像是否已加载。

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结果，填充我的可观察数组，然后通过首先检查承诺数组是否满了来设置每个“缩略图”的高度，当承诺数组满了时获取最大高度并将所有“缩略图”设置为该高度。

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之后才附加它。如果仅仅改变事件绑定的顺序不起作用，我可能需要创建自定义绑定。

- bflemi3

Answer 1

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

无论如何，这行代码是错误的：

var promise = $.Deferred().resolve;

该代码创建了一个延迟对象，然后将 promise 赋值为 resolve 函数的引用，而不会立即调用它。

当该结果数组传递给 $.when 时，组合的 promise 立即被解析，因为那些没有实现 promise 接口的对象被隐式地认为是已解析的。

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

- Alnitak

---

谢谢Alnitak。我今晚有时间测试一下，但这听起来可能是我的问题的原因。我会告诉你的 :) - bflemi3

同意绑定的顺序。我也会尝试这样做。 - bflemi3