jquery Button、Knockout.js、ajaxリクエスト

Question

jquery ui buttonでknockout.jsを使用しています。下にあるボタンにカスタムバインドを作成しました。私はクリック項目のテキストを変更していますが、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ボタンをobservableにバインドし、そのobservableを適切に更新することを推奨します：

最初のスニペットは、私が使用する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}); 
    } 
}; 

次に、バインディングは次のようになります。これは、あなたがモデル上でobservableをtextObservableと呼んでいることを前提としています。あなたはAJAXリクエストを行う前に、

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

最後に、あなたのajaxRequest方法で、あなたは「認証中」にtextObservableを更新する必要があります。 成功ハンドラのajaxコールでは、textObservableを初期値に更新する必要があります。