Subskrypcja ręczna Subskrypcja nie jest aktywowana przy zmianie dropu

Question

Kolejne pytanie do Knockout, na które nie mogę znaleźć pomocy.

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

Answer 1

niektórych kwestiach:

• zapomniałeś zrobić .bind(this) na pierwszym subskrybować
• this.viewModel zamiast tylko this
• miałeś optionsValue: "Id" zamiast optionsValue: "id"
• miałeś optionsText: "County" zamiast optionsText: "county" Tablica
• swoich countyData „s nazywa country zamiast counties

Updated skrzypce: http://jsfiddle.net/antishok/jbrr5/23/