jquery-ui - 连接 knockout 和 jQueryUI 自动完成

Question

我有一个 jQueryUI 自动完成功能，它从客户列表中提取并基于选择器 [input data-role="customer-search"] 附加。选择客户后，我会进行 AJAX 调用以获取完整的客户详细信息。这部分我工作得很好。问题是我无法找到将 knockout 纳​​入其中的方法。我的理想情况是像“onSelect:customerSelected”这样的自定义绑定(bind)，它将接收选定的客户JSON并将其集成到整个模型中，然后会导致页面上的一堆字段更新为模型。客户.地址、模型.客户.类型。

我要反对的地方是在我从 AJAX 调用中取回客户 JSON 后的连接点，如何将其发送到 View 模型上的“customerSelected”方法，该方法与我附加了 jQuery 自动完成的相同输入相关联。

Answer 1

这是我的团队为处理自动完成而编写的绑定(bind)处理程序的简化版本。当一个项目被选中时，该项目被插入到 View 模型中的一个可观察数组中。它以下列方式绑定(bind):

<input type="text" data-bind="autoComplete:myObservableArray, source:'myUrl'" />

您可以自定义在“选择:”区域中选择项目时发生的情况。

ko.bindingHandlers.autoComplete = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var postUrl = allBindingsAccessor().source; // url to post to is read here
        var selectedObservableArrayInViewModel = valueAccessor();

        $(element).autocomplete({
            minLength: 2,
            autoFocus: true,
            source: function (request, response) {
                 $.ajax({
                    url: postUrl,
                    data: { term: request.term },
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                var selectedItem = ui.item;

                if (!_.any(selectedObservableArrayInViewModel(), function (item) { return item.id == selectedItem.id; })) { //ensure items with the same id cannot be added twice.
                    selectedObservableArrayInViewModel.push(selectedItem);
                }
            }
        });
    }
};

希望您正在寻找类似的东西。如果您需要澄清一些事情，请告诉我。

备注 除了 jquery 和 knockout，此示例还使用 underscore.js(_.any() 函数)