1

Observable クラスで 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]);
            }
        });

そして、ここに私の作業中の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

私があなたのケースを正しく理解していれば、実際には2つ必要ありませんDataSources。実際には 1 つで十分で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と、リストが自動的に更新されます (2 つの要素を挿入し、2 つ目の要素を更新します)。

于 2013-03-12T16:58:13.873 に答える