5

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

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

4

2 回答 2

11

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

<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() 函数）

于 2013-03-30T01:13:41.387 回答
0

值更新：模糊

data-bind="value: textbox, valueUpdate: blur"绑定为我解决了这个问题：

$(function() {
    $(".autocomplete").autocomplete({
        source: [
           "ActionScript",
           "AppleScript",
           "Asp",
           "BASIC",
           "C",
           "C++",
           "Clojure",
           "COBOL",
           "ColdFusion",
           "Scheme"]
    });
 });

var viewModel = {
    textbox: ko.observable()
};

ko.applyBindings(viewModel);
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<input type="text" class="autocomplete" data-bind="value: textbox, valueUpdate: blur"/>

于 2017-06-01T11:10:26.747 回答