jquery Button，Knockout.js和ajax請求

我正在用jquery ui按鈕使用knockout.js。我在下面的按鈕上建立了一個自定義綁定。我正在更改點擊項目上的文字，但我也有其他點擊提交ajax請求。一旦請求完成，將文本設置回原始文本的最佳設計模式是什麼？我知道我可以手動完成，或者將被調用的元素傳遞給該方法，但是還有更多的解耦方法。jquery 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 }); 
      }); 
     } 
    };

來源

2011-12-09 Mike Flynn

我不會推薦將按鈕綁定到硬編碼文本。相反，我建議將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的模型的可觀察值;

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

最後，在ajaxRequest方法，你讓AJAX請求之前，您需要更新textObservable爲「身份驗證」。在ajax調用的成功處理程序中，您需要將textObservable更新爲初始值。

來源

2011-12-09 03:22:42 jmacinnes

有道理。但是，如果我在頁面上有多個按鈕，我將不得不爲每個按鈕添加一個項目到我的視圖模型。我想我可以做到這一點，但我寧願保持靜態UI與元素顯示，但這只是我。我會試試看看我是否喜歡它。 –

jquery Button，Knockout.js和ajax請求

回答

相關問題