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

我在使用可观察类制作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
                    }
                }
            }
        });

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

---

以下是我的下拉列表html：

$("#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
                    }
                }
            }
        });

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

---

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

我看了看： 玩了数据绑定、数据值字段、数据文本字段，但没有得到我想要的结果

因此，我要寻找的是，一种将常规DropDownList（绑定到数据源的DropDownList）绑定到可观察类的方法。例如，文本将绑定到SelectedMember.name\u function\u club，值将绑定到SelectedMember.id\u function\u club

你能帮忙吗

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

---

谢谢

如果我正确理解了您的案例，您实际上不需要两个

数据源。一个就足够了，因为它们实际上是可观察的，任何更新都会传播到
DropDownList

让我们定义
kendoDropDownList
，如下所示：

$("#ddFunctionClub").kendoDropDownList({
    height        : 150,
    dataTextField : "name_function_club",
    dataValueField: "id_function_club",
    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
将立即更改（例如，添加或删除元素或更改其内容）

请参见此处的示例：。
如果按下按钮
Change DataSource
，列表将自动更新（插入两个元素并更新第二个元素）.
如果我正确理解了您的案例，您实际上不需要两个
数据源
。一个数据源就足够了，因为它们实际上是
可观察的
，任何关于它的更新都将传播到
下拉列表

让我们定义
kendoDropDownList
，如下所示：

$("#ddFunctionClub").kendoDropDownList({
    height        : 150,
    dataTextField : "name_function_club",
    dataValueField: "id_function_club",
    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
将立即更改（例如，添加或删除元素或更改其内容）

请参见此处的示例：。
如果按下按钮
Change DataSource
，列表将自动更新（插入两个元素并更新第二个元素）.
我不知道你在尝试什么，但在我看来这是一个相当复杂的问题。kendoDrowDownList已经接受了一个可观察的数据源。你为什么不按原样使用它？你检查了吗？嘿#OnaBai，谢谢你的回答。我确实看到了，事实上，这就是我的dropdownlist目前正在做的事情。我想要的是拥有id#u函数和namViewModel的e_函数值绑定到下拉列表的id_函数和name_函数值。因此，当我加载ViewModel时，下拉列表会自动更改值，并且当我更改下拉列表值时，ViewModel会自动知道某些内容已更改。如果没有ViewModel，则可以使用dropdownlist.dataSour加载它ce.read（）用于加载它，dropdownlist应该会自动更新。仍然无法理解为什么需要两个数据源。也许我不需要两个数据源。如果是这样的话，您能否更具体地说明如何执行此操作？我想我仍然没有遵循…（很抱歉）…查看来自viewmodel请求的json响应。查看是否存在id_function_club和name_function_club。如何使用这些值（通过viewmodel）设置dropdownlist？我不知道你在尝试什么，但在我看来这是一个相当复杂的问题。kendoDrowDownList已经接受了一个可观察的数据源。你为什么不按原样使用它？你检查了吗？嘿#OnaBai，谢谢你的回答。我确实看到了，事实上，这就是我的dropdownlist目前正在做的。我想要的是有id#函数和名称#fu绑定到下拉列表的id_函数和name_函数值的ViewModel的操作值。因此，当我加载ViewModel时，下拉列表会自动更改值，并且当我更改下拉列表值时，ViewModel会自动知道某些内容已更改。如果没有ViewModel，则可以使用dropdownlist.dataSource.r加载它ead（）用于加载它，dropdownlist应该会自动更新。仍然无法理解为什么需要两个数据源。也许我不需要两个数据源。如果是这样的话，你能更具体地说明怎么做吗？我想我仍然没有遵循…（很抱歉）…查看来自viewmodel请求的json响应。查看是否存在id_function_club和name_function_club。如何使用这些值（通过viewmodel）设置dropdownlist？OnaBai！谢谢你的回答。我想我们对我想要完成的事情有不同的看法，所以我不能说这是我问题的确切答案，但肯定会引导我走上正确的道路。谢谢Sonabai！谢谢你的回答。我想我们对我想要完成的事情有不同的看法，所以我不能说这是正确的答案对我的问题给出了确切的答案，但肯定会引导我走上正确的道路。谢谢