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

我不建议将按钮绑定到硬编码文本。相反，我建议将 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 的 observable；

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

最后，在您的 ajaxRequest 方法中，在发出 AJAX 请求之前，您需要将 textObservable 更新为“Authenticating”。在 ajax 调用的成功处理程序中，您需要将 textObservable 更新为您的初始值。

于 2011-12-09T03:22:42.650 回答