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

我认为处理这个问题的一种简单方法是在您正在更新的observable中添加类似loading子可观察对象的内容。然后，在启动AJAX请求时将loading设置为true。数据到达时将loading设置为false。

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

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

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

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

1 个答案: