Sottotitoli Abbonamento manuale Non attivato al cambio a caduta

Un'altra questione di knockout su cui non riesco a trovare aiuto.Sottotitoli Abbonamento manuale Non attivato al cambio a caduta

In pratica sto provando a implementare un menu a cascata. Ho chiesto aiuto l'altro giorno su come analizzare il mio complicato JSON (che proviene da un controller di cakePHP.) L'aiuto ricevuto l'altro giorno è stato eccellente, ma ho avuto un altro piccolo problema

Il problema che sto avendo è Sto aggiornando viewModel dopo che ho fatto una chiamata a JSON per ottenere un elenco di paesi. Una volta che popolino il menu a discesa, voglio che venga visualizzato l'elenco delle contee e infine un elenco di città, ma non ci sono ancora. Seleziono un paese dalla lista che il mio osservabile non spara.So sospetto che sia perché ho creato this.selectedCountry = ko.observable() e aggiornamento utilizzando la mappatura, ma non so quale opzione valida dovrebbe essere. il segno:/

Ho il seguente codice

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());

Ho anche creato un JSFiddle di demo il problema qui http://jsfiddle.net/jbrr5/21/

Anche in questo caso alcun aiuto con questa edizione sarà apprezzato e una volta ho ottenere il blocco di knockout sarà molto più facile.

Grazie

fonte

2012-10-26 user1771329