jquery-ui - Knockout.js 自动完成绑定(bind)处理程序

Question

很难说出这里问的是什么。这个问题是模棱两可的、模糊的、不完整的、过于宽泛的或修辞的，无法以目前的形式得到合理的回答。如需帮助澄清这个问题以便重新打开它，visit the help center .




9年前关闭。




我正在尝试使用 Knockout.js 的自动完成处理程序，并且正在寻找一些反馈。这目前有效，但我想看看我是否可以在没有这么多 Eval() 的情况下完成工作，并且为了可重用性，看看是否有一种方法可以在不预设的情况下引用 ViewModel被命名为“vm”，如下所示。

用法:

<input placeholder="Test..." type="search" data-bind="autoComplete:$root.persons, source:'/api/Person/', parameterName:'searchString', labelKey:'displayName', valueKey:'urid', onSelected:'addPerson'" autocomplete="off" />

JS:

ko.bindingHandlers.autoComplete = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var postUrl = allBindingsAccessor().source; // url to post to is read here
        var param = allBindingsAccessor().parameterName;
        var labelKeyName = allBindingsAccessor().labelKey;
        var valueKeyName = allBindingsAccessor().valueKey;
        var selectedFunction = allBindingsAccessor().onSelected;
        var selectedObservableArrayInViewModel = valueAccessor();

        $(element).autocomplete({
            minLength: 2,
            autoFocus: true,
            source: function (request, response) {
                $.ajax({
                    url: param != null ? postUrl : postUrl + request.term,
                    data: param == null ? '' : param + "=" + request.term,
                    dataType: "json",
                    type: "GET",
                    success: function (data) {
                        response($.map
                            (data, function (obj) {
                                return {
                                    label: eval("obj." + labelKeyName),
                                    value: eval("obj." + valueKeyName)
                                };
                            }));
                    }
                });
            },
            select: function (event, ui) {
                if (selectedFunction != null) {
                    var functionCall = 'vm.' + selectedFunction + "(event, ui)";
                    eval(functionCall);
                }
            }
        });
    }
};

Answer 1

对于一些灵感，我会看看 Ryan Niemeyers 在这个 stackoverflow post 中的回答，这是我见过的最全面的自动完成绑定(bind)处理程序。

我和我的团队为我们自己的目的创建的另一个但更简单的自动完成绑定(bind)处理程序可以在 stackoverflow post 中找到。