如何将剑道下拉列表绑定到可观察类？

Question

我在使用可观察类制作DropDownList时遇到问题。

下面是可观察类的代码：

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]);
            }
        });

这是我的工作下拉列表：

$("#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%;" />

最后，这是我从observable datasource请求中得到的结果：

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

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

我看了看：MVVM小部件绑定和周围玩数据绑定，数据值字段，数据文本字段，但不能得到我想要的结果。

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

你能帮忙吗？

如果有不太清楚的地方，请留言询问更多信息。

谢谢！

Answer 1

如果我正确理解了你的情况，你实际上不需要两个DataSSource。一个就足够了，因为它们实际上是可观察的，任何更新都会传播到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"
    }
});

注意：我说最小的传输，因为它可以像您需要的那样复杂（就像包含许多操作的原始传输一样）。

从服务器接收到的数据（据我从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"}
];

更改数据源后，DropDownList将立即更改（例如，添加或删除元素或更改其内容）。

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