Kendo MVVM自动完成不加载项目

时间：2013-02-22 15:11:07

标签： jquery mvvm autocomplete asmx kendo-ui

我从服务器返回响应，一切看起来都不错，但由于某些原因，自动完成小部件没有显示项目。如果有人能够指出我做错了什么，那将非常感激。

当我在自动填充框中输入内容时来自服务器的响应：

{"d":[{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":0,"Name":"Name0"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":1,"Name":"Name1"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":2,"Name":"Name2"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":3,"Name":"Name3"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":4,"Name":"Name4"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":5,"Name":"Name5"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":6,"Name":"Name6"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":7,"Name":"Name7"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":8,"Name":"Name8"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":9,"Name":"Name9"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":10,"Name":"Name10"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":11,"Name":"Name11"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":12,"Name":"Name12"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":13,"Name":"Name13"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":14,"Name":"Name14"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":15,"Name":"Name15"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":16,"Name":"Name16"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":17,"Name":"Name17"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":18,"Name":"Name18"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":19,"Name":"Name19"}]}

自动完成定义和绑定

<input id="acMedications" data-role="autocomplete" data-text-field="Name" data-bind="source: dsMedication, value: SelectedMedication"
        style="width: 400px;" placeholder="Enter value..." />

ViewModel和DataSource定义

$(document).ready(function() {
        var viewModel = kendo.observable({
            dsMedication: new kendo.data.DataSource({
                transport: {
                    read: {
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        url: "../Services/svcMedication.asmx/SearchMedication",
                        dataType: "json",
                        cache: false
                    },
                    update: {
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        url: "../Services/svcMedication.asmx/SaveMedication",
                        dataType: "json",
                        cache: false
                    },
                    destroy: {
                        url: "../Services/svcMedication.asmx/DeleteMedication",
                        type: "DELETE",
                        dataType: "json",
                        cache: false
                    },
                    create: {
                        url: "../Services/svcMedication.asmx/SaveMedication",
                        type: "PUT",
                        cache: false
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                        options.MedicationParam = $('#acMedications').val();
                        return kendo.stringify(options);
                    }
                },
                batch: true,
                schema: {
                    data: "d",
                    model: {
                        id: "MedicationId",
                        fields: {
                            MedicationId: {
                                type: "number"
                            },
                            Name: {
                                type: "text"
                            }
                        }
                    }
                },
                success: function(data) {
                    alert(data);
                }
            }),
            SelectedMedication: null,
            HasChanges: false,
            save: function() {
                this.dsMedication.sync();
                this.set("HasChanges", false);
            },
            remove: function() {
                if (confirm("Are you sure you want to delete this record?")) {
                    this.dsMedication.remove(this.SelectedMedication);
                    this.set("SelectedMedication", this.dsMedication.view()[0]);
                    this.change();
                }
            },
            showForm: function() {
                return this.get("SelectedMedication") !== null;
            },
            change: function() {
                this.set("HasChanges", true);
            }
        });

        kendo.bind($("#fmMedication"), viewModel);
    });

提前致谢！

2 个答案:

答案 0 :(得分：2)

试图重现它无济于事。这是我试过的代码：

var viewModel = kendo.observable({
            dsMedication: new kendo.data.DataSource({
                transport: {
                  read: function(options) {
                    options.success(
{"d":[{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":0,"Name":"Name0"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":1,"Name":"Name1"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":2,"Name":"Name2"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":3,"Name":"Name3"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":4,"Name":"Name4"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":5,"Name":"Name5"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":6,"Name":"Name6"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":7,"Name":"Name7"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":8,"Name":"Name8"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":9,"Name":"Name9"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":10,"Name":"Name10"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":11,"Name":"Name11"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":12,"Name":"Name12"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":13,"Name":"Name13"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":14,"Name":"Name14"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":15,"Name":"Name15"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":16,"Name":"Name16"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":17,"Name":"Name17"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":18,"Name":"Name18"},{"__type":"BlaBla.Services.svcMedication+Medication","MedicationId":19,"Name":"Name19"}]}                    
                    );
                  }
                },
                batch: true,
                schema: {
                    data: "d",
                    model: {
                        id: "MedicationId",
                        fields: {
                            MedicationId: {
                                type: "number"
                            },
                            Name: {
                                type: "text"
                            }
                        }
                    }
                }
            }),
            SelectedMedication: null
        });

kendo.bind(document.body, viewModel);

这是一个现场演示：http://jsbin.com/ahiyay/2/edit

答案 1 :(得分：0)

正确的代码：

  

var viewModel = kendo.observable（{               dataSource：new kendo.data.DataSource（{                   data：[{“_ type”：“BlaBla.Services.svcMedication + Medication”，“MedicationId”：0，“Name”：“Name0”}，{“ _type”：“BlaBla.Services .svcMedication +药物”， “MedicationId”：1， “名称”： “NAME1”}，{ “_ 型”： “+ BlaBla.Services.svcMedication药物”， “MedicationId”：2， “名称”： “NAME2”}，{ “ _type”： “+ BlaBla.Services.svcMedication药物”， “MedicationId”：3， “名称”： “NAME3”}，{ “_ 型”：“布拉布拉.Services.svcMedication +药物 “ ”MedicationId“：4， ”名称“： ”NAME4“}，{ ” _type“： ”+ BlaBla.Services.svcMedication药物“， ”MedicationId“：5”，名称“：” NAME5 “}，{” _ 型 “：” + BlaBla.Services.svcMedication药物”， “MedicationId”：6中， “名称”： “Name6”}，{ “ _type”： “BlaBla.Services.svcMedication +药物”， “MedicationId”：7， “名称”： “Name7”}，{ “_ 型”： “+ BlaBla.Services.svcMedication药物”， “MedicationId”：8， “名称”： “Name8”}，{ “ _type”： “+ BlaBla.Services.svcMedication药物”， “MedicationId”：9 “名称”： “Name9”}，{“_ 型“：” + BlaBla.Services.svcMedication药物 “ ”MedicationId“：10， ”名称“： ”Name10“}，{” _type “：” + BlaBla.Services.svcMedication药物”， “MedicationId”：11， “名称”： “Name11”}，{ “_ 型”： “+ BlaBla.Services.svcMedication药物”， “MedicationId” ：12， “名称”： “Name12”}，{ “ _type”： “+ BlaBla.Services.svcMedication药物”， “MedicationId”：13， “名称”： “Name13”}，{“_ < EM>型 “：” + BlaBla.Services.svcMedication药物 “ ”MedicationId“：14， ”名称“： ”Name14“}，{ ” _type“： ”+ BlaBla.Services.svcMedication药物“，” MedicationId “：15，” 名称 “：” Name15 “}，{” _ 型 “：” + BlaBla.Services.svcMedication药物 “ ”MedicationId“：16， ”名称“： ”Name16“}，{” _type “：” + BlaBla.Services.svcMedication药物”， “MedicationId”：17， “名称”： “Name17”}，{ “_ 型”： “+ BlaBla.Services.svcMedication药物” “MedicationId”：18， “名称”： “Name18”}，{ “ _type”： “+ BlaBla.Services.svcMedication药物”， “MedicationId”：19， “名称”： “Name19”}]               }），dataTextField：“Name”，SelectedMedication：null           }）; 

    kendo.bind(document.body, viewModel);
相关问题
最新问题