1

我在使 DropDownList 与 Observable 类一起工作时遇到问题。

这是可观察类的代码：

var viewModel = kendo.observable({
            dsMember: new kendo.data.DataSource({
                type: "json",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 6,
                error: function (e) {
                    top.CustomError(e);
                },
                transport: {
                    read: {
                        contentType: "application/json; charset=utf-8",
                        type: "GET",
                        url: function () {
                            return "../api/Member/" + viewModel.MemberParam;
                        },
                        dataType: "json",
                        cache: false,
                        complete: function (e) {
                            viewModel.set("SelectedMember", viewModel.dsMember.view()[0]);
                        }
                    },
                    update: {
                        contentType: "application/json; charset=utf-8",
                        type: "POST",
                        url: "../api/Member",
                        dataType: "json",
                        cache: false,
                        complete: function (e, textStatus) { top.CustomSuccess(e, textStatus); }
                    },
                    destroy: {
                        contentType: "application/json; charset=utf-8",
                        url: "../api/Member",
                        type: "DELETE",
                        dataType: "json",
                        cache: false,
                        complete: function (e) {
                            viewModel.NewRecord();
                        }
                    },
                    create: {
                        contentType: "application/json; charset=utf-8",
                        type: "PUT",
                        url: "../api/Member",
                        cache: false,
                        complete: function (e, textStatus) {
                            if (typeof (e.responseText) != "undefined") {
                                var response = $.parseJSON(e.responseText);
                                var obj = viewModel.dsMember.view()[viewModel.dsMember.view().length - 1];
                                obj.MemberId = response.MemberId;
                                viewModel.set("SelectedMember", obj);
                                document.getElementById("tbMemberId").value = obj.MemberId;

                                top.CustomSuccess(e, textStatus);
                            }
                        }
                    },
                    parameterMap: function (data, operation) {
                        return kendo.stringify(data);
                    }
                },
                batch: true,
                schema: {
                    model: {
                        id: "MemberId",
                        fields: {
                            MemberId: {
                                type: "number",
                                editable: false // this field is not editable
                            },
                            MemberName: {
                                type: "text",
                                validation: { // validation rules
                                    required: true // the field is required
                                }
                            },
                            id_function_club: {
                                type:"number"
                            },
                            name_function_club: {
                                type: "text"
                            }
                        }
                    }
                }
            }),
            MemberParam: 0,
            SelectedMember: null,
            save: function () {
                this.dsMember.sync();
            },

            remove: function () {
                if (confirm("Are you sure you want to delete this record?")) {
                    this.dsMember.remove(this.SelectedMember);
                    this.set("SelectedMember", this.dsMember.view()[0]);
                    this.save();
                }
            },
            NewRecord: function () {
                var newRecord = new viewModel.dsMember.reader.model();
                newRecord.MemberId = null;
                viewModel.dsMember.add(newRecord);
                viewModel.set("SelectedMember", viewModel.dsMember.view()[viewModel.dsMember.view().length - 1]);
            }
        });

这是我的工作 DropDownList：

$("#ddFunctionClub").kendoDropDownList({
            height: 150,
            dataTextField: "name",
            dataValueField: "id_function_club",
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        contentType: "application/json; charset=utf-8",
                        type: "GET",
                        url: function () {
                            return "../api/Function_Club";
                        },
                        dataType: "json",
                        cache: false
                    }
                }
            }
        });

这是我的 DropDownList 的 html：

<input id="ddFunctionClub" style="width: 100%;" />

最后，这就是我从可观察数据源请求中得到的结果：

{"MemberId":123,"MemberName":"Person","BirthDate":"10/01/1980","id_function_club":2,"name_function_club":"My Function","NameUnit":"My Unit"}

我做了一些研究，但找不到任何合适的例子。

我查看了： MVVM Widget Binding并玩弄了 data-bind、data-value-field、data-text-field 但无法得到我想要的结果。

因此，我正在寻找的是一种将常规 DropDownList（与数据源绑定的）绑定到 Observable 类的方法。例如，文本将绑定到 SelectedMember.name_function_club，值绑定到 SelectedMember.id_function_club。

你能帮我吗？

如果有什么不太清楚，请发表评论以获取更多信息。

谢谢！

4

1 回答 1

1

如果我正确理解了您的情况，您实际上并不需要两个DataSources. 一个就足够了，因为它们实际上是Observable并且任何更新都将传播到DropDownList.

让我们定义kendoDropDownList如下：

$("#ddFunctionClub").kendoDropDownList({
    height        : 150,
    dataTextField : "name_function_club",
    dataValueField: "id_function_club",
    dataSource    : dataSource
});

最低限度DataSource是：

var dataSource = new kendo.data.DataSource({
    type     : "json",
    transport: {
        read: "xyz"
    }
});

注意：我说的是最低限度 transport，因为它可以根据您的需要复杂（就像包含许多操作的原始版本一样。

从服务器接收的数据（据我从 OP 了解到的）将是一组对象，就像您包含的对象一样。

var data = [
    {"MemberId": 123, "MemberName": "Person", "BirthDate": "10/01/1980", "id_function_club": 1, "name_function_club": "My Function 1", "NameUnit": "My Unit"},
    {"MemberId": 123, "MemberName": "Person", "BirthDate": "10/01/1980", "id_function_club": 2, "name_function_club": "My Function 2", "NameUnit": "My Unit"},
    {"MemberId": 123, "MemberName": "Person", "BirthDate": "10/01/1980", "id_function_club": 3, "name_function_club": "My Function 3", "NameUnit": "My Unit"},
    {"MemberId": 123, "MemberName": "Person", "BirthDate": "10/01/1980", "id_function_club": 4, "name_function_club": "My Function 4", "NameUnit": "My Unit"}
];

只要您更改 DataSource，DropDownList就会更改（例如，添加或删除元素或更改其内容）。

请参阅此处的示例：http: //jsfiddle.net/OnaBai/DtbQY/#base。如果您按下按钮Change DataSource，列表会自动更新（插入两个元素并更新第二个元素）。

于 2013-03-12T16:58:13.873 回答