jquery 단추, Knockout.js 및 ajax 요청

Question

knockout.js를 jquery UI 단추와 함께 사용하고 있습니다. 아래에있는 버튼에 맞춤 바인딩을 만들었습니다. 클릭 항목의 텍스트를 변경하려고하지만 Ajax 요청을 제출하는 추가 클릭이 있습니다. 요청이 완료되면 텍스트를 원래 텍스트로 다시 설정하는 가장 좋은 디자인 패턴은 무엇입니까? 나는 그것을 수동으로 할 수도 있고, 메소드에 호출 된 요소를 전달할 수도 있지만, 더 결합 해제 된 방법이있다.

<button type="submit" data-bind="button: { text: 'login', pressed: 'authenticating...' }, click: function() { site.ajaxRequest(); }"></button> 


ko.bindingHandlers.button = { 
     init: function (element, valueAccessor) { 

      var binding = ko.utils.unwrapObservable(valueAccessor()); 

      $(element).button({ label: binding.text }).click(function() { 
       $(this).button({ label: binding.pressed }); 
      }); 
     } 
    }; 

Answer 1

버튼을 하드 코드 된 텍스트에 바인딩하는 것을 권장하지 않습니다. 대신 jQuery UI 단추를 관찰 가능으로 바인딩 한 다음 관찰 대상을 적절하게 업데이트하는 것이 좋습니다.

첫 번째 코드 단편은 내가 사용하는 jQuery UI 단추를 업데이트하는 데 사용할 수있는 바인딩입니다. (가짜 코드)

ko.bindingHandlers.buttonText = 
{ 
    init: function (element, valueAccessor) 
    { 
     ko.bindingHandlers.buttonText.update(element, valueAccessor); 
    }, 
    update: function (element, valueAccessor) 
    { 
     var binding = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).button({label: binding}); 
    } 
}; 

다음은 바인딩의 모양입니다. 이 모델에서는 textObservable이라는 관찰 가능 객체가 있다고 가정합니다. 당신이 AJAX 요청을하기 전에

<button type="submit" data-bind="button: {buttonText: textObservable, click: site.ajaxRequest"></button> 

마지막으로, ajaxRequest 방법으로, 당신은 '인증 중'에 textObservable를 업데이트해야합니다. 성공 처리기 ajax 호출에서 textObservable을 초기 값으로 업데이트해야합니다.