如何使用带有加载微调器的页面中的基因剔除来绑定图像列表 [英] How to bind list of images using knockout in page with loading spinner

问题描述

我一直在搜索Google以获取一些想法，并且找到了一些代码，但是它不完整且难以理解. 我想使用敲除绑定图像列表.

I have been searching Google to get some ideas and I found some code but it's incomplete and hard to understand. I want to use knockout to bind a list of images.

在加载图像时设置微调框背景的最佳方法是什么.我有一个微调器类，可以设置和取消设置背景图像.

What's the best way to set up a spinner background while the images are loading. I have a spinner class I can set and unset to the background image.

 ko.bindingHandlers.Loading = {
        update: function (element, valueAccessor, allBindingsAccessor) {
            var value = valueAccessor(), allBindings = allBindingsAccessor();
            var valueUnwrapped = ko.utils.unwrapObservable(value);

            if (valueUnwrapped == true)
                $(element).showLoading(); // Make the element visible
            else
                $(element).hideLoading();   // Make the element invisible
        }
    };

and then use it like

<div data-bind="Loading: isLoading" >

更新

    <img src="http://www.aero-sa.com/images/ajax-loader.gif" data-bind="visible:loading" />
var model = function() {
    var self = this;
    this.loading =  ko.observable(true);
    setTimeout(function() {
        self.loading(false);
    }, 4000);
}
ko.applyBindings(new model());

我对上面的代码没什么疑问. 这里的这是什么? 这指向什么? 当我编写类似代码的代码时，图像不会隐藏....为什么此不起作用.

i have few question on the above code. what is this here? this point to what? when i write the code like then image is not getting hide....why this is not working.

var model = function() {
        //var self = this;
        this.loading =  ko.observable(true);
        setTimeout(function() {
            this.loading(false);
        }, 4000);
    }
    ko.applyBindings(new model());

请解释一下.

推荐答案

我遇到了类似的问题.就我而言，如果无法加载整个HTML块，则需要隐藏该块HTML.我最终使用了imagesLoaded库( https://github.com/desandro/imagesloaded )包裹在敲除自定义绑定中:

I had a similar problem. In my case, I needed to hide a whole block of HTML if an image inside the block could not be loaded. I ended up using the imagesLoaded library (https://github.com/desandro/imagesloaded), which I wrapped in a knockout custom binding :

function tryRegisterEvent(imgLoad, event, handler) {
    if (handler === undefined) return;

    imgLoad.on(event, handler);
}

function tryRegisterEvents(imgLoad, events, bindings) {
    for (var i = 0; i < events.length; ++i) {
        var event = events[i];
        tryRegisterEvent(imgLoad, event, bindings[event]);
    }
}

ko.bindingHandlers['imagesLoaded'] = {
    'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (imagesLoaded === undefined) {
            throw new Error('imagesLoaded is not defined');
        }

        var bindings = ko.utils.unwrapObservable(valueAccessor());

        var imgLoad = imagesLoaded(element);

        tryRegisterEvents(imgLoad, ['always', 'done', 'fail', 'progress'], bindings);
    },
    'update': function () {}
};

然后，我可以在HTML中使用此绑定，如下所示:

Then I could use this binding in my HTML, as follow:

<div data-bind="visible: isLoading() || isLoaded()">
    Some more HTML and text...
    <img src="..." data-bind="imagesLoaded: { done: function () { isLoaded(true); }, always: function () { isLoading(false); } }" />
</div>

我最初将isLoading设置为true，将isLoaded设置为false，然后事件处理程序将根据图像加载状态相应地更改我的视图模型的状态.

I initially set isLoading to true and isLoaded to false, and the event handlers would then change my view model's state accordingly, based on the image load status.

请注意，由于imagesLoaded库可以使用容器而不是单个图像(并监视容器中的所有图像)，因此可以在包含所有图像库的父元素上使用此自定义绑定，然后显示微调器并隐藏它触发always事件时.

Note that since the imagesLoaded library can work with container instead of single images (and monitor all images inside the container), you can use this custom binding on a parent element containing all your image gallery, then display your spinner and hide it when the always event is triggered.

这篇关于如何使用带有加载微调器的页面中的基因剔除来绑定图像列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！