Кнопка jquery, Knockout.js и запрос ajax - PullRequest
Новая
       32

Кнопка jquery, Knockout.js и запрос ajax

1 голос
/ 09 декабря 2011

Я использую knockout.js с кнопкой jquery ui. Я создал пользовательскую привязку на кнопке, которая находится ниже. Я изменяю текст в элементе click, но у меня также есть дополнительный щелчок, который отправляет запрос 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 });
            });
        }
    };

1 Ответ

2 голосов
/ 09 декабря 2011

Я бы не рекомендовал привязывать кнопку к жестко закодированному тексту. Вместо этого я рекомендую привязать кнопку пользовательского интерфейса jQuery к наблюдаемой и затем обновить ее соответствующим образом:

Первый фрагмент - это привязка, которую можно использовать для обновления кнопки пользовательского интерфейса jQuery, которую я использую. (код псевдо) 

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 до «Authenticating». В обработчике успеха вызова ajax вам нужно обновить textObservable до вашего начального значения.

...