1

jquery uiボタンで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 });
            });
        }
    };
4

1 に答える 1

2

I wouldn't recommend binding the button to hardcoded text. Instead, I recommend binding the jQuery UI button to an observable and then updating that observable appropriately:

First snippet is a binding that can be used to update a jQuery UI button that I use. (psuedo code)

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

Next, here is what your binding would look like. This assumes you have an observable on your model called textObservable;

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

Finally, in your ajaxRequest method, before you make the AJAX request, you need to update textObservable to 'Authenticating'. In the success handler of the ajax call, you need to update textObservable to your initial value.

于 2011-12-09T03:22:42.650 に答える