使用 KnockoutJS 在所有图像加载（并执行某些操作）时捕获

Question

我目前有一个基本实现，可以捕获所有图像的加载时间，但我对代码、可伸缩性以及 UI 和 viewModel 之间的紧密耦合不满意。

我在 viewModel 和 bindingHandler 之外声明了一组 promise，以便每个都可以访问它。 bindingHandler 会将每个未解析的 promise 推送到数组中，并且 init 函数将等待数组接收到所有已解析的 promise。一旦发生这种情况，就会调用一个为所有图像设置统一高度的函数。

这是用户界面：

<ul data-bind="foreach: movies">
    <li>
        <div class="image">
            <img data-bind="imageLoad: { src: posters.Detailed, alt: title }"/>
        </div>
    </li>
</ul>

对方：

function ViewModel() {
    var self = this;
    self.movies = ko.observableArray([]);

    self.init = function(data) {
        self.isLoading(true);

        self.movies = ko.utils.arrayMap(data, function(item) {
            return new robot.ko.models.Movie(item);
        });

        $.when.apply($, promises).done(function () {
            robot.utils.setThumbnailHeight($('.thumbnails li'), function () {
                self.isLoading(false);
            });
        });
    };
}

ko.bindingHandlers.imageLoad = {
    init: function(element, valueAccessor) {
        var options = valueAccessor() || {};
        var promise = $.Deferred();

        var loadHandler = function() { return promise.resolve; };
        promises.push(promise);

        ko.applyBindingsToNode(element, {
            event: { load: loadHandler },
            attr: { src: options.src, alt: options.alt }
        });     
    }
}

在一个完美的世界中，我的 viewModel 只会向我的 bindingHandler 传递一个回调，但它是动态的，它不需要了解有关 UI 的任何信息，并且 bindingHandler 将能够确定它需要哪个元素调整。我玩弄了某种 deferredObservable 的想法，但最后我只是不高兴在 viewModel 中有这个。我还考虑过在父元素上使用data- 属性来了解实际设置高度的元素，但这似乎很草率。

我觉得我错过了什么。

所以，我在问，有什么更好的方法来实现这一点，允许松散耦合和可扩展性，这样我就不必专门告诉 UI（尽可能多地）做什么以及何时做，来自我的 viewModel？

Answer 1

在处理它的 foreach 范围内使用自定义绑定。例如：

<ul data-bind="foreach: movies, uniformHeight: movies">
    <li>
        <div class="image">
            <img data-bind="imageLoad: { src: posters.Detailed, alt: title }"/>
        </div>
    </li>
</ul>

基于数据的方法

根据 ViewModel 的形状做出假设 - 具体来说，假设 Promise 的状态反映了加载图像的实际状态。 bindingHandler 可能看起来像这样：

ko.bindingHandlers.uniformHeight = {
  init: function(element, valueAccessor) {
      //assume valueAccessor contains an array of promises
      $.when.apply($, valueAccessor()()).done(function () {
            robot.utils.setThumbnailHeight($(element).find('.thumbnails li'), function () {
                self.isLoading(false);
            });
      });
  }
};

这可能需要围绕您如何处理 robot.ko.models.Movie 中的逻辑进行更多重组，但根据您发布的内容，没什么大不了的。

基于资源的方法

需要更多管道，但最终可能会更可靠。

您的外部uniformHeight 绑定可以在bindingContext 上注册自己，并等待子imageLoad 绑定每次都引发一个事件来通知图像已加载；当它们返回时积累高度，可能会反弹。