Knockout：无法处理可观察到的绑定

Question

我在谷歌上搜索了一下，并试图用我找到的例子尽可能好地解决这个问题，但是唉...没有成功。

使命：

• 打开模式，并显示用于选择已存在用户的复选框

错误：

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

问题：

• 在选择一个人之前，新的或现有的玩家是“未定义的”。因此，我创建了一个“teamPlayerDefault”js对象，其数据类似于api调用返回的数据（尚未实现）。这是用来初始化的

JSFiddle链接：

点击这里。。。

代码：

$(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

到现在为止，你可能已经明白了这一点，但我能够用-

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

只是为了扩展为什么这是，你绑定了'与'newOrExistingPlayer，并需要提高一个级别来访问你定义selectedPeople Id