5

助けが見つからないように見える別のノックアウトの質問。

私は基本的にカスケードドロップダウンを実装しようとしています。先日、複雑な JSON (cakePHP コントローラーから来ている) を解析する方法について助けを求めました。先日受けた助けは素晴らしかったのですが、別の小さな問題に遭遇しました。

私が抱えている問題は、JSON を呼び出して国のリストを取得した後、viewModel を更新していることです。ドロップダウンに入力したら、郡のリストを表示し、最終的には都市のリストを表示したいのですが、まだそこにいません。残念ながら、変更すると、リストから国を選択すると、オブザーバブルが起動しません。マッピングを使用して作成this.selectedCountry = ko.observable()および更新したためだと思われますが、これに有効なオプションが何であるかわかりません。もちろん、私は目印になることもできます:/

次のコードがあります

HTML:

<select id="countries" 
            data-bind='
                options: countries, 
                optionsValue : "Id", 
                optionsText: "country", 
                optionsCaption: "[Please select a country]", 
                value: selectedCountry'>
</select>

<select id="counties" 
                data-bind='
                    options: selectedCountry() ? counties : null, 
                    optionsValue : "Id", 
                    optionsText: "County", 
                    optionsCaption: "[Please select a county]", 
                    value: selectedCounty,
                    visible: (counties() && counties().length > 0)'>
        </select>

Javascript

var countryData= {"countries":[{"Country":{"id":"1","country":"England"}},{"Country":{"id":"2","country":"Wales\/Cymru"}},{"Country":{"id":"3","country":"Scotland"}},{"Country":{"id":"4","country":"Republic of Ireland"}},{"Country":{"id":"5","country":"Northern Ireland"}}]};

var countyData= {"country":[{"County":{"id":"1","county":"Essex"}}]};

var countryMappingOptions = {
    'countries': {
        'update': function (options) {
            return ko.mapping.fromJS(options.data.Country);
        },
        'ignore': ["selectedCountry"]
    }
};

 var countyMappingOptions = {
    'counties': {
        'update': function (options) {
            return ko.mapping.fromJS(options.data.County);
        }
    }
};
        var vm= function () {
            this.selectedCountry = ko.observable(); 
            this.selectedCounty =  ko.observable();
            this.countries = ko.mapping.fromJS([]); 
            this.counties =  ko.mapping.fromJS([]);
            // Whenever the continent changes, reset the country selection
            this.selectedCountry.subscribe(function (countryId) {
                alert(countryId);   
                this.selectedCounty(undefined);
                this.counties(undefined);
                if (countryId != null) {
                   ko.mapping.fromJS(countyData, countyMappingOptions,this.viewModel );
              }
            });
            this.selectedCounty.subscribe(function (countryId) {
                alert(countryId);    
            } .bind(this));
        };

        var viewModel = new vm();
        ko.applyBindings(viewModel );
        console.log(viewModel .countries());
        ko.mapping.fromJS(countryData, countryMappingOptions ,viewModel );
        console.log(viewModel .selectedCountry() );

ここで問題をデモするために JSFiddle も作成しましたhttp://jsfiddle.net/jbrr5/21/

繰り返しになりますが、この問題に関するヘルプをいただければ幸いです。ノックアウトのコツをつかめば、はるかに簡単になります。

ありがとう</p>

4

1 に答える 1

6

いくつかの問題:

  • .bind(this)あなたは最初のサブスクライブで行うのを忘れました
  • this.viewModelただの代わりにthis
  • あなたはoptionsValue: "Id"代わりに持っていたoptionsValue: "id"
  • あなたはoptionsText: "County"代わりに持っていたoptionsText: "county"
  • あなたcountyDataの配列はcountry代わりに呼び出されますcounties

更新されたフィドル: http://jsfiddle.net/antishok/jbrr5/23/

于 2012-10-27T22:44:55.440 に答える