Knockout js绑定到下拉列表

Question

我只是从昨天开始学习淘汰赛 js。一切对我来说都是新的。我设法做到了。假设我正在使用淘汰 js 将国家/地区列表、州列表保存到数据库。我已经完成了第一项任务，即保存国家/地区列表。问题从保存状态列表的第二页开始。在这里，我将国家绑定到 state.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

您已经在 javascript 中定义了 stateViewModel，但您没有在任何地方分配它，也没有在任何地方绑定它。
Here 您可以阅读绑定上下文。