Question

我正在使用带有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 });
            });
        }
    };

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

接下来，这是你的绑定看起来像什么。这假设您的模型上有一个名为textObservable的可观察对象;

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

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

jquery Button，Knockout.js和ajax请求

1 个答案: