javascript - knockout : Unable to process binding on observable & issue with initialization

Question

我已经四处搜索，并尝试通过我在周围找到的示例尽可能地解决这个问题，但是唉......没有成功。

使命:

• 打开模式并显示用于选择现有用户的复选框
• 如果单击 -> 下拉菜单可见，可供选择的人员 下拉列表的来源(选择)正常工作..
• 当从下拉列表中选择人员时，api 调用(尚未实现)将返回一个对象来填充 newOrExistingPlayer 可观察对象，并在字段中显示它的数据..
• 如果没有人从下拉列表中选择，这是一个新的注册，没有预先选择一个人。

错误:

knockout-3.4.0.debug.js:3326 Uncaught ReferenceError: Unable to process binding "with: function (){return newOrExistingPlayer }"
Message: Unable to process binding "value: function (){return selectedPersonId }"
Message: selectedPersonId is not defined

问题:

• 在选择一个人之前，newOrExistingPlayer 是“未定义的”。因此，我创建了一个“teamPlayerDefault”js 对象，其数据类似于应该从 api 调用返回的数据(尚未实现)。 这是为了初始化..
• 我认为我没有以正确的方式处理空的可观察对象。是否应该以某种方式对其进行初始化以避免这种情况？

JSFiddle 链接:

Click here...

代码:

$(document).ready(function() {

  var NewTeamPlayerViewModel = function() {

    var teamPlayerDefault = {
      Id: 0,
      ExistingPersonId: 0,
      Email: "",
      Email2: "",
      FirstName: "",
      LastName: "",
      Address: "",
      PostalCode: "",
      PostalCity: "",
      Phone: "",
      Phone2: "",
      BirthdayString: "",
      ShirtNo: 0,
      TeamIdString: getQueryVariable("teamId")
    };

    var self = this;

    self.existingPersonChecked = ko.observable(false);

    self.existingPersons = ko.observableArray();
    self.selectedPersonId = ko.observable(null);

    self.selectedPersonId.subscribe(function(selPersonId) {
      // Handle a change here, e.g. update something on the server with Ajax.
      console.log('Valgt personid ' + selPersonId);
    });

    self.newOrExistingPlayer = ko.observable(teamPlayerDefault);

    self.setExistingPlayer = function(personId) {
      // TODO : GET EXISTING PLAYER
      self.newOrExistingPlayer(null);
      console.log(self.newOrExistingPlayer());
    }

    self.toggleExistingPersonChecked = function() {
        self.existingPersonChecked(!self.existingPersonChecked);
      }
      // TODO UGLE : Ikke hent alle personer, men ekskluder de som allerede er spillere på laget!!!
    self.initializeFromServer = function() {
      //var teamId = getQueryVariable("teamId");
      var url = 'api/User/GetAllPersons';

      $.getJSON(url)
        .done(function(data) {
          newPlayerModel.existingPersons(data);
          //console.table(data);
        });

    }
  }

  var newPlayerModel = new NewTeamPlayerViewModel();
  newPlayerModel.initializeFromServer();
  ko.applyBindings(newPlayerModel, document.getElementById("ko-player"));
  console.log("Heisann!" + newPlayerModel.newOrExistingPlayer());
});

<div id="ko-player">
    <div class="modal fade" data-bind="with: newOrExistingPlayer" id="full-modal-player" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 999999999999">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 id="myModalLabel">Ny spiller</h4>
          </div>
          <div class="modal-body" style="height: 100% !important; max-width: 100%; height:800px">
            <div class="row">
              <div class="col-sm-12">
                <div class="col-sm-6">
                  <div class="checkbox">
                    <label class="checkbox-label">Velg eksisterende person?</label>
                    <input type="checkbox" data-bind="checked: $parent.existingPersonChecked,  click: $parent.toggleExistingPersonChecked" />
                  </div>
                </div>
                <div class="col-sm-6" style="display: none" data-bind="visible: $parent.existingPersonChecked">
                  <div class="form-group">
                    <label>Velg person:</label>
                    <select data-bind="options: $parent.existingPersons, value: selectedPersonId, optionsCaption: 'Velg en person'"></select>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
            <div class="clear:both; height:1px">&nbsp;</div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

你现在可能已经想通了，但我能够将它绑定(bind)到 -

<select data-bind="value: $parent.selectedPersonId"></select>

只是为了进一步说明这是为什么，您正在“与”newOrExistingPlayer 绑定(bind)并且需要提升一个级别以访问您定义 selectedPersonId 的位置