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

私は今、ノックアウトを使用しているとして、私は、カスタムバインディングを使用したいのですが、私はちょうどそれがどのように動作するかのまわりで私の頭を取得傾けます。

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> 

しかし、これがすべてでは動作しません：

私はこのような何かを推測します。どんな助けでも大歓迎です。

EDIT 次がきますが、そのは更新しながら、プログレスバーが表示されないことのようです：

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

私はこの1つを処理するための簡単な方法はloadingサブのようなものを追加することであると思いますあなたが更新している観測値に観測可能。次に、AJAXリクエストを開始するときにloadingをtrueに設定します。データが到着したら、loadingをfalseに設定します。

次に、画像の表示をyourobservable.loadingにバインドすることができます。ここで

はサンプルです：http://jsfiddle.net/rniemeyer/kyaKc/

はまた、カスタムバインディングに関する1つのヒント：自分の価値がアクセスした観測のいずれかが更新されるとの結合update機能は、再び実行されます。したがって、あなたのケースでは、priceが更新されたときにのみ実行されます。 AJAXリクエストの前にpriceをヌルに設定し、値がnullの場合はバインディング・イメージを表示し、そうでなければAJAXリクエストが成功したときに更新したオブザーバブルの実際の値を表示することができます。