使用Knockout.js自动完成,如何绑定到正确的属性?

时间:2014-06-25 19:14:29

标签: javascript jquery knockout.js autocomplete

好的,我正在开发一个具有自动完成功能的程序,并且无法绑定到我想要的属性。 data 对象是具有UserName和FullName等属性的对象数组。因此,如果data [0] .UserName是'John.Doe',那么data [0] .FullName就是 'John Doe'。调试时,我可以看到数据对象具有所有正确的值。这是映射对象:

var EmployeeViewModel = function (data) {
    this.Email = ko.observable();
    this.FullName = ko.observable();
    this.$type = 'EmployeeViewModel ';
};

var AdSearchResultsViewModel = function (data) {
    this.Email = ko.observable();
    this.FullName = ko.observable();
    this.$type = 'EmployeeViewModel ';
};

var mapping = {
    'employees': {
        create: function (options) {
            return new EmployeeViewModel(options.data);
        }
    },
    'adSearchResults': {
        create: function (options) {
            return new AdSearchResultsViewModel(options.data);
        }
    }
};

这就是EmployeeSearch ajax函数:

$("#EmployeeSearch").autocomplete({

        source: function (request, response) {
            $("#ajaxLoading").show(),

            $.ajax({
                url: "https://somesite.com/adsearch/search/directory",
                dataType: "jsonp",
                data: {
                    User: request.term,
                    Scope: "All"
                },

                success: function (data) {
                    viewModel.adSearchResults.removeAll();
                    ko.mapping.fromJS(data, mapping, viewModel.adSearchResults);
                    viewModel.adSearchResults.remove(function (item) { return item.Email() == ""; });
                    $("#ajaxLoading").hide();
                }
            });
        },

但是,当我开始在文本框中键入名称以搜索用户时,如果我搜索 John.Doe ,搜索将返回正确的结果。此外,如果我输入 John ,它将返回正确的结果。但是如果我输入 John Doe ,它就会停止返回正确的结果。所以对我来说,似乎搜索绑定到UserName属性。如何将其绑定到FullName属性?这就是我现在所拥有的,而且我不确定它是如何开始使用UserName属性的。

<input id="EmployeeSearch" class="ui-icon-search" /><br />
        <div>
            <div class="DualListBox">
                <div style="float: left; width: 400px;">
                    <label>Search Results:</label>
                    <img id="ajaxLoading" src="~/Content/Images/ui-anim_basic_16x16.gif" style="display: none;" />
                    <select style="height: 335px; width: 400px;" multiple="multiple" data-bind="options: adSearchResults, selectedOptions: availableSelectedMembers, optionsText: function (item) { return item.FullName() + ', ' + item.Email() }"></select>
                </div>

0 个答案:

没有答案