Question

我只是从昨天开始学习淘汰赛。一切似乎对我来说都是新的。我设法做到了。让我们说我正在使用knock out 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内，绑定上下文绑定到countryViewModel，没有定义StateModel，因此 StateModel未定义

您已在自己的javascript中定义了stateViewModel，但未将其分配到任何地方，也无法将其绑定到任何地方。
Here您可以阅读绑定上下文。

Knockout js绑定到下拉列表

1 个答案: