Subskrypcja ręczna Subskrypcja nie jest aktywowana przy zmianie dropu

Kolejne pytanie do Knockout, na które nie mogę znaleźć pomocy.Subskrypcja ręczna Subskrypcja nie jest aktywowana przy zmianie dropu

Zasadniczo próbuję wdrożyć listę rozwijaną kaskadowo. Poprosiłem o pomoc drugiego dnia, jak parsować mój skomplikowany JSON (który pochodzi od kontrolera CakePH.) Pomoc, którą otrzymałem w innym dniu była doskonała, ale natknąłem się na inny mały numer:

Problem, który mam, to Aktualizuję viewModel po tym, jak zadzwonię do JSON, aby uzyskać listę krajów. Kiedy zapełniam listę, chcę wyświetlić listę hrabstw, a ostatecznie listę miast, ale jeszcze mnie nie ma. Niestety, kiedy zmienię Wybieram kraj z listy, której obserwowalny nie uruchamia się Podejrzewam, że tak jest, ponieważ utworzyłem this.selectedCountry = ko.observable() i zaktualizowałem używając mapowania, ale nie wiem, jaka powinna być opcja tego. Oczywiście mógłbym również być sposobem znak:/

Mam następujący kod

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

Mam również stworzył JSFiddle demo problem tutaj http://jsfiddle.net/jbrr5/21/

Ponownie jakiejkolwiek pomocy z tego problemu będzie docenione i raz ja zdobądź nokaut, będzie o wiele łatwiej.

Dzięki

Źródło

2012-10-26 user1771329