2012-10-26 3 views
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> 

자바 스크립트

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

는 또한 여기에 문제 http://jsfiddle.net/jbrr5/21/

다시

이 문제에 어떤 도움이 이해할 수있을 것이다 내가 한 번 데모하는 JSFiddle을 만들었습니다 녹아웃의 걸림쇠를 얻으면 훨씬 쉬울 것입니다.

감사

답변

6

일부 문제 :

  • 당신은 당신이 아니라 당신이 가지고 optionsValue: "id"
  • optionsValue: "Id"했다
  • this.viewModel 대신 단지 this
  • 구독 1 일에 .bind(this)을 깜빡 optionsText: "county" 대신 optionsText: "County"
  • 당신의 countyData의 배열은 country 대신
counties의라고

업데이트 바이올린 : 나는 이러한 오류를 놓친 http://jsfiddle.net/antishok/jbrr5/23/

+0

가 대단히 감사합니다, 나는 결코 알지 못할 것이다! 응답을 감사하십시오. – user1771329

관련 문제