Question

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

我正在反对的地方是我从AJAX调用中获得Customer JSON之后的连接点，如何将它发送到viewmodel上的“customerSelected”方法，该方法与我附加的相同输入相关联jQuery自动完成。

Answer 1

以下是我的团队为处理自动填充而编写的绑定处理程序的简化版本。选择项目后，该项目将插入到视图模型中的可观察数组中。它受以下列方式约束：

<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（）函数）

Answer 2

valueUpdate：blur

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

＆＃13;

$(function() {
    $(".autocomplete").autocomplete({
        source: [
           "ActionScript",
           "AppleScript",
           "Asp",
           "BASIC",
           "C",
           "C++",
           "Clojure",
           "COBOL",
           "ColdFusion",
           "Scheme"]
    });
 });

var viewModel = {
    textbox: ko.observable()
};

ko.applyBindings(viewModel);

＆＃13;

<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"/>

＆＃13;

连接knockout和jQueryUI自动完成

2 个答案:

valueUpdate：blur