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 子可观察对象添加到您正在更新的可观察对象中。然后，在启动 AJAX 请求时将 loading 设置为 true。当数据到达时，将 loading 设置为 false。

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

这是一个示例： http://jsfiddle.net/rniemeyer/kyaKc/

另外，还有一个关于您的自定义绑定：只有当任何访问其值的可观察对象更新时，绑定的 update 函数才会再次运行。因此，在您的情况下，它只会在 price 更新时运行。您可以在 AJAX 请求之前将 price 设置为 null，然后在您的绑定中，当该值为 null 时显示加载图像，否则显示您的可观察值的实际值（当您的 AJAX 请求时您会更新该值）请求成功）。