KnockoutJS - 使用自定义绑定添加动画

Question

我想利用自定义绑定来显示进度图标(微调器或条形图),同时通过ajax调用更新价格.

在我开始使用Knockout之前,我只是在ajax方法开始时调用onUpdating(),然后在ajax成功返回价格时调用onUpdated(price).

function onUpdating() {
    $(".price").empty().html('<img src="/Content/Img/Site/progress.gif" />');
}

function onUpdated(price) {
    $(".price").empty().html('£' + price);
}

由于我现在正在使用Knockout,我想使用自定义绑定,但我无法理解它是如何工作的.

我猜是这样的:

    ko.bindingHandlers.showProgress = {
        init: function (element, valueAccessor) {
            $(element).empty().html('<img src="/Content/Img/Site/progress.gif" />');
        },
        update: function (element, valueAccessor) {
            $(element).empty().html('£' + valueAccessor());
        }
    }

<p>
    Price: <span data-bind="showProgress: price"></span>
</p>

但是,这根本不起作用.任何帮助非常感谢.

编辑 以下似乎到了那里,但它在更新时没有显示进度条:

    ko.bindingHandlers.showProgress = {
        update: function (element, valueAccessor) {
            $(element).empty().html('<img src="/Content/Img/Site/progress.gif" />');
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).empty().html('£' + value);
        }
    }

Answer 1

我认为处理这个问题的一个简单方法是在loading您正在更新的observable中添加类似sub-observable的内容.然后,loading在启动AJAX请求时设置为true.loading数据到达时设置为false.

然后,您可以将图像的可见性绑定到yourobservable.loading.

以下是一个示例:http://jsfiddle.net/rniemeyer/kyaKc/

此外,还有一个关于自定义绑定的提示:update只有在访问了访问其值的任何可观察对象时,绑定的功能才会再次运行.因此,在您的情况下,它只会在price更新时运行.您可以price在AJAX请求之前将其设置为null,然后在绑定中显示值为null时的加载图像,否则显示您的observable的实际值(当您的AJAX请求成功时,您将更新它).