标签：javascript event-handling knockout-js jquery-deferred

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

此外,我可以看到加载处理程序在firebug中命中,但调试行为只是给图像加载时间,所以一切都在调试时正常工作.

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

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结果,填充我的observable数组,然后通过首先检查以确保promises数组已满,然后何时获取最大高度并设置每个“thumbnail”的高度所有“缩略图”到那个高度.

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

我的问题是：为什么加载事件在图像加载之前触发,如何在适当的时间触发加载事件？

UPDATE

我的想法是,load事件可能会过早触发,因为它可能是在图像有src后附加的.如果只是更改事件绑定的顺序不起作用,我可能必须创建自定义绑定.

解决方法:

您可以通过将事件：数据放在attr：data之前来修复事件绑定问题.

在任何情况下(没有双关语意)这一行是错误的：

var promise = $.Deferred().resolve;

它创建一个延迟,然后将promise指定为resolve函数的引用,而不调用它.

当结果数组传递给$.时,立即解析组合的promise,因为隐式地认为已解析了本身不实现promise接口的对象.

您需要在imageLoadHandler之外创建延迟对象(具有所需长度)的数组,然后在该点上显式调用适当的延迟对象上的.resolve().

标签：javascript,event-handling,knockout-js,jquery-deferred
来源： https://codeday.me/bug/20190901/1784066.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。