1

私はknockoutjsをいじり始め、いくつかの単純なバインディング/依存バインディングを行いました。私の目標は<select>、別のリストの値に基づいて1つのリストを作成すること<select>です。両方とも、私のasp.netWebサービスへのajax呼び出しからロードされています。

だから私は2つの<select>リストを持っています

<select id="make" data-bind="options: availableMakes, value: selectedMake, optionsText: 'text', optionsCaption: 'Choose a make'"></select>
<select id="model" data-bind="options: availableModels, value: selectedModel, optionsText: 'text', optionsCaption: 'Choose a model'"></select>

次に、私のJavaScriptは次のようになります。

$(function () {

            // creating the model
            var option = function (text, value) {
                this.text = text;
                this.value = value;
            }

            // creating the view model
            var searchModel = {
                availableMakes: ko.observableArray([]),
                availableModels: ko.observableArray([]),
                selectedMake: ko.observable(),
                selectedModel: ko.observable()
            }

            // adding in a dependentObservable to update the Models based on the selected Make
            searchModel.UpdateModels = ko.dependentObservable(function () {
                var theMake = searchModel.selectedMake() ? searchModel.selectedMake().text : '';
                if (theMake != '') {
                    $.ajax({
                        url: "/data/service/auction.asmx/GetModels",
                        type: 'GET',
                        contentType: "application/json; charset=utf-8",
                        data: '{make:"' + theMake + '"}',
                        success: function (data) {
                            var makes = (typeof data.d) == 'string' ? eval('(' + data.d + ')') : data.d;
                            var mappedModels = $.map(makes, function (item) {
                                return new option(item.text, item.value);
                            });
                            searchModel.availableModels(mappedModels);
                        },
                        dataType: "json"
                    });
                }
                else {
                    searchModel.availableModels([]);
                }
                return null;
            }, searchModel);

            // binding the view model
            ko.applyBindings(searchModel);

            // loading in all the makes
            $.ajax({
                url: "/data/service/auction.asmx/GetMakes",
                type: 'GET',
                contentType: "application/json; charset=utf-8",
                data: '',
                success: function (data) {
                    var makes = (typeof data.d) == 'string' ? eval('(' + data.d + ')') : data.d;
                    var mappedMakes = $.map(makes, function (item) {
                        return new option(item.text, item.value);
                    });
                    searchModel.availableMakes(mappedMakes);
                },
                dataType: "json"
            });

        });

現在、これは期待どおりに機能しますが、コードがかなり長く見えるため、これは間違っていると思います。より少ないコードでknockoutjsを使用せずにこれを行うことができます。また、の値に基づいてロードするために追加しavailableModelsたdependentObsevableを使用しているため、ロードする方法は明らかに正しくありません。UpdateModelsavailableModelsselectedMake().text

これが理にかなっていて、これの改善されたバージョンを指摘できることを願っていますか？または、[作成]の選択に基づいてモデルをリロードするにはどうすればよいですか？

どうもありがとう、

4

2 に答える 2

4

あなたのコードはかなり正常に見えると思います。UpdateModelsdependentObservableの場合、実際には手動サブスクリプションを使用して次のようselectedMakeにすることができます。

searchModel.selectedMake.subscribe(function (newMake) {
    if (newMake) {
        //ajax request
    }
    else {
        searchModel.availableModels([]);
    }
}, searchModel);

これは機能を変更するのではなく、単一の観察可能な変更をサブスクライブするためのより明示的な方法です。

optionsValue: 'text'バインディングで使用（または「値」）を選択することもできselectedMake、テキストまたは値に直接設定されます。

モデルがmakeオブジェクトの子である場合は、モデルをにバインドすることもできますselectedMake().models（selectedMakeがnullになるのを防ぐ必要があります。これは、DO、1.3制御フローバインディング、またはインラインのように行うことができます。selectedMake() ? selectedMake().models : []

于 2011-09-28T15:26:28.863 に答える
2

私はライアンの答えに同意します。

関連する接線を少し取り上げて、ajaxを使用せず、例を単純化するために少しリファクタリングしました（いつでも追加できます）。しかし、ここにいくつかのサンプルデータで何をしようとしているのかを示すフィドルがあります。

http://jsfiddle.net/johnpapa/vGg2h/

于 2011-12-30T01:59:45.693 に答える