代码之家  ›  专栏  ›  技术社区  ›  Mike Thibault

Knockout.js自动完成绑定处理程序[已关闭]

  •  5
  • Mike Thibault  · 技术社区  · 13 年前

    我正在尝试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);
                    }
                }
            });
        }
    };
    
    1 回复  |  直到 13 年前
        1
  •  5
  •   Community Mohan Dere    9 年前

    为了获得一些灵感,我会看看Ryan Niemeyers在这篇文章中的回答 stackoverflow post ,这是我见过的最全面的自动完成绑定处理程序。

    我和我的团队为自己的目的创建了另一个更简单的自动完成绑定处理程序,可以在下面找到 stackoverflow post