KnockoutJS - 애니메이션 추가를위한 맞춤 바인딩 사용

Question

ajax 호출을 통해 가격이 업데이트되는 동안 진행률 아이콘 (회 전자 또는 막대)을 표시하기 위해 맞춤 바인딩을 사용하고 싶습니다.

녹아웃을 사용하기 전에 저는 아약스 메서드의 시작 부분에서 onUpdating()을 호출하고 아약스가 가격을 성공적으로 반환했을 때 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> 

그러나이 전혀 작동하지 않습니다

나는 이런 식으로 뭔가를 생각한다. 어떤 도움이라도 대단히 감사합니다.

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 요청이 성공했을 때 업데이트했을 수 있음)을 표시 할 수 있습니다.