2012-10-26 30 views
5

Başka bir Nakavt sorunuyla ilgili yardım bulamıyorum.Nakavt Manuel Abonelik Açılırken Beklenmiyor

Temel olarak basamaklı bir açılır menü uygulamaya çalışıyorum. Geçen gün karmaşık bir JSON'u (bir cakePHP denetleyicisinden geliyor) ayrıştırmak için yardım istedim. Geçen gün aldığım yardım mükemmeldi ama başka bir küçük sorunla karşılaştım.

Sorun şu ki Ben bir listenin listesini almak için JSON'a çağrı yaptıktan sonra viewModel'i güncelliyorum.İlk kez açılan listeyi görüntülediğimde, ilçelerin listesinin görüntülenmesini ve sonuçta şehirlerin bir listesini istiyorum ama ben henüz orada değilim. Gözlemlenebilir bir listeden bir ülke seçiyorum. this.selectedCountry = ko.observable()'u oluşturduğumdan ve haritalamayı kullanarak güncellediğimden şüpheleniyorum ama bunun için geçerli bir seçeneğin ne olduğunu bilmiyorum. işareti:/

Aşağıdaki kod var

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

Ben de burada sorunu http://jsfiddle.net/jbrr5/21/

Yine

bu konu ile herhangi bir yardım takdir edilecektir ve ben bir kez demo bir JSFiddle oluşturduk nakavt asmak almak çok daha kolay olacak.

Teşekkür

cevap

6

Bazı konular:

  • Eğer yerine vardı optionsValue: "id"
  • ait optionsValue: "Id" vardı
  • this.viewModel yerine sadece this
  • abone ilk on .bind(this) yapmak unuttum optionsText: "county" yerine optionsText: "County"
  • sizin countyData 'ın dizi country yerine
counties ait denir

Güncelleme keman i bu hataları cevapsız nasıl http://jsfiddle.net/antishok/jbrr5/23/

+0

Çok teşekkür ederim, biliyorum asla !!! Yanıtı takdir et. – user1771329