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

我想使用自定义绑定来显示进度图标（微调器或条），同时通过ajax调用更新价格

在开始使用Knockout之前，我只是在ajax方法的开头调用onUpdate（），然后在ajax成功返回价格时调用onUpdate（price）

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

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

函数更新（）{
$（“.price”）.empty（）.html（“”）；
}
功能未更新（价格）{
$（“.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={
init：函数（元素、值访问器）{
$（元素）.empty（）.html（“”）；
},
更新：函数（元素、值访问器）{
$（element）.empty（）.html（“£”+valueAccessor（））；
}
}

价格：

然而，这根本不起作用。非常感谢您的帮助

编辑 以下内容似乎已达到目标，但在更新时未显示进度条：

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

ko.bindingHandlers.showProgress={
更新：函数（元素、值访问器）{
$（元素）.empty（）.html（“”）；
var value=ko.utils.unwrapobbservable（valueAccessor（））；
$（element）.empty（）.html（“£”+值）；
}
}

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

然后，您可以将图像的可见性绑定到

yourobservable.loading

以下是一个示例：

---

另外，关于自定义绑定的一个技巧是：绑定的

update

函数只会在任何被访问值的可观察对象被更新时再次运行。因此，在您的情况下，它只会在更新

price

时运行。在AJAX请求之前，您可以将

price

设置为null，然后在绑定中显示值为null时的加载图像，否则显示可观察值的实际值（当AJAX请求成功时您会更新该值）。

嗨，Ryan，感谢您在这方面的帮助。如何将其集成到alread存在的视图模型中？您是否有一些示例代码或fiddle？你可以在任何地方添加你的

加载

观测值，因此它不需要是你正在填充的观测值的子观测值。嗨，Ryan，我给你发了一个示例链接，因为我不知道如何在Fiddle中创建合适的示例。不幸的是，我还不能发布到我正在工作的网站的链接。