0

我一直在搜索谷歌以获得一些想法，我发现了一些代码，但它不完整且难以理解。我想使用敲除来绑定图像列表。

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

这是代码，但不清楚

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

我对上面的代码没有什么疑问。这是什么？这点到什么地步？当我写这样的代码时，图像没有被隐藏....为什么这不起作用。

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

如果可能，请解释。

4

1 回答 1

0

我有一个类似的问题。就我而言，如果无法加载块内的图像，我需要隐藏整个 HTML 块。我最终使用了 imagesLoaded 库（https://github.com/desandro/imagesloaded），我将其包装在一个淘汰赛自定义绑定中：

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 中使用这个绑定，如下所示：

<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然后事件处理程序将根据图像加载状态相应地更改我的视图模型的状态。

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

于 2014-02-19T09:27:41.400 回答