Question

我在让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并使用数据绑定，数据值字段，数据文本字段，但无法获得我想要的结果。

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

你能帮忙吗？

如果问题不明确，请发表评论，要求提供更多信息。

谢谢！

Answer 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"
    }
});

注意：我说 minimum 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"}
];

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

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

如何将Kendo DropDownList绑定到Observable类？

1 个答案: