녹아웃 js 바인딩 목록을 드롭 다운

Question

나는 어제부터 녹아웃 js를 배우고 있습니다. 모든게 내게 새 것처럼 보입니다. 나는 어떻게 든 그것을 할 수있다. 우리는 js를 사용하여 Database에 국가 목록, 상태 목록을 저장한다고 말합니다. 나는 국가 목록을 저장하는 첫 번째 작업을 수행했습니다. 문제는 상태 목록을 저장하는 두 번째 페이지에서 시작되었습니다. 여기에 나는 states.aspx 페이지의 드롭 다운리스트에 국가를 바인딩하고있다.

내가 코드를 제공하자 :

<div id="state_container"> 
    <table border="0" cellpadding="0" cellspacing="0" class="form" data-bind="with:StateModel" 
     width="300px"> 
     <tr> 
      <td> 
       <span>StateName&nbsp; </span> 

       &nbsp;<input type="text" name="stateName" data-bind="value:StateName" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <span>Short Name</span> 


       <input type="text" name="shortname" data-bind="value:ShortName" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <span>Country&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; 
        <select data-bind="options: CountriesList,optionsText: 'CountryName',optionsValue:'CountryId',value:selectedChoice,optionsCaption: 'Select Country..'" style="width: 148px"> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="button" name="btnSubmit" value="Add" data-bind="click:Submit" /> 
       <input type="button" name="btnReset" value="Reset" /> 
       <span data-bind="text: selectedChoice" > </span> 
      </td> 
     </tr> 
    </table> 
</div> 

내 스크립트를

<script type="text/javascript"> 
     (function() { 


      var countryModel = { 

       CountriesList: ko.observableArray([]) 

      }; 


      var countryViewModel = function() { 
       var self = this; 
       self.CountryModel = countryModel; 
       // self.validateCountry = ko.validation.group(self.CountryModel, { deep: true }); 
       self.CountriesList = ko.observableArray([]); 
       self.selectedChoice = ko.observable(); 

      } 

      var stateModel = { 
       StateId: ko.observable(0), 
       StateName: ko.observable('').extend({ required: true }), 
       ShortName: ko.observable('').extend({ required: true }), 
       IsActive: ko.observable(true), 
       CountryId: ko.observable() 
      }; 

      var stateViewModel = function() { 
       var self = this; 
       self.StateModel = stateModel; 
       self.validateState = ko.validation.group(self.CountryModel, { deep: true }); 
       self.StatesList = ko.observableArray([]); 
       //Handle Submit 
       self.Submit = function() { 
        if (self.validateCountry().length == 0) { 
         if (self.StateModel.StateId() > 0) { 
          self.UpdateCountry(); 
         } else { 
          self.AddState(); 
         } 
         self.Reset(); 
        } else { 
         self.validateCountry.showAllMessages(true); 
        } 
       } 

       self.AddState = function() { 
        var args = JSON.stringify({ argBO: jQuery.parseJSON(ko.toJSON(self.StateModel)) }); 
        ajax.Post("AddState.aspx/AddState", args, false).success(function (data) { 
         if (data.d[0] > 0) { 
          logger.success(data.d[1]); 
         } 
         else { 
          logger.error(data.d[1]); 
         } 

        }); 
       } 

       self.Reset = function() { 
        var md = self.CountryModel; 
        md.CountryName(''); 
        md.ShortName(''); 
        md.IsActive(true); 
        md.CountryId(0); 
        self.validateCountry.showAllMessages(false); 
       } 
      }; 

      var vm = new countryViewModel(); 
      ajax.Get("AddCountry.aspx/getCountries", { IsActive: true }, false).success(function (data) { 
       vm.CountriesList(data.d); 
      }); 

      ko.applyBindings(vm, document.getElementById("state_container")); 

     })(); 



    </script> 

내가 무엇입니까 문제는 디버그 모드에서 박히는되지 StateViewModel, 그리고이 종료 따라서 모든 시간 같은 StateModel는

을 정의되지 않은 일부 몸이 제발 도와주세요! 이해하는데 도움이 될만한 자료를 알려주십시오.

Answer 1

countryViewModel()을 state_container에 바인딩하고 있습니다. 여기

<div id="state_container"> 
    <table border="0" cellpadding="0" cellspacing="0" class="form" data-bind="with:StateModel"> 

가 state_container 안에 당신 바인딩 컨텍스트가 정의 된 StateModel을 갖지 않는 countryViewModel에 바인딩, 따라서 StateModel 당신은 당신의 자바 스크립트 stateViewModel을 정의

을 정의되지 않은,하지만 당신은 지정하지 않은 어디서나 그것을 묶어 두지 마십시오.
Here 당신은 바인딩 컨텍스트에서 읽을 수 있습니다.