javascript - knockout.js中的图像数据

Question

我正在尝试使用 knockout.js 实现本质上是图像预加载器和缓存器的功能。练习的要点是我正在加载的图像除了首先在服务器上进行处理外，还需要花费相当长的时间才能下载。因此，我的 UI(可以在图像集之间浏览)旨在仅在必要时下载这些集以减少负载。此外，我不想向用户提供在漫长等待期间发生某些事情的指示。

这就是原因，下面是我当前“如何”的描述:

1:我使用 jQuery .load 来用实际图像数据填充数组:

    images[doc.pages()[i].pagenumber() - 1] = $("<img />").attr('src', path).load(function() {}

我使用 .load 是因为它只在每个网络请求完成后更新 DOM，允许我为代码块中的每次迭代增加一个计数器以向用户指示加载正在进行中(例如 loadCounter++;)

2:在 .load 回调中，我现在这样做:

if(loadedPages === doc.pages().length){
    if(loadedPages === doc.pages().length){
        for(var x = 0; x < images.length; x++){
            $("#" + doc.idname()).append(images[x]);
        } 
    }
}

这里发生的事情是图像数组包含实际准备就绪的 HTML 图像 DOM 元素，一旦所有网络请求完成，这些元素可以直接注入(inject)结构。

这就是我目前的做法，这就是我接下来想要实现的目标:

我不想这样做，而是用相同的图像数据填充一个 knockout 的 observableArray，并对其进行 foreach 绑定(bind)，例如:

<div data-bind="foreach:images">
    <img data-bind="what goes here?">
</div> 

这个例子最终解决了我的问题。 knockout 中的数据绑定(bind)结构通常让您绑定(bind)到属性，例如<img data-bind="attr:{src:path} .但是，这样做会导致每次 dom 更新时重新加载图像(图像数据在浏览时被删除)。

最后，提炼出来的问题是:我能否像我的示例中那样用 DOM 图像元素填充一个 observableArray，然后用 knockout.js 迭代它们？如果这不可行或不切实际，是否有任何其他缓存和迭代图像的解决方案，最好是使用 knockout？

提前致谢，有答必有奖

更新

可以<object>标签被使用？例如<object data-bind="attr:{data: $data.imageData}"></object> .我现在正在玩它，但我只得到 [object Object]。

Answer 1

你能用一个custom binding吗？在 div 上并在其中添加 img 元素？我在这里假设您已经下载并创建了它们？然后，您的图像可以是您创建的 DOM 节点的可观察数组。

<div data-bind="imageAttach: images">
</div> 

ko.bindingHandlers.slideVisible = {
    init: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to
        // Loop over the array sent in, and add them all to the div
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
        // You could delete all the image nodes here and add in the newly created ones
    }
};