这是代码，但不清楚

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

请尽可能解释。

Answer 1

我有类似的问题。就我而言，如果无法加载块内的图像，我需要隐藏整个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事件被触发时。

如何使用加载微调器在页面中使用knockout绑定图像列表

这是代码，但不清楚

更新

1 个答案: