Нокаут: невозможно обработать привязку по наблюдаемым и выдавать с инициализацией

Question

У меня есть googled вокруг, и я попытался исправить это так хорошо, как могу, с примерами, которые я нашел вокруг, но, увы ... нет успеха.

Миссия:

• Модальные открыт и отображение флажка для выбора уже существующего пользователя
• Если щелкнули -> Выпадающие видно с доступными лицами, чтобы выбрать из Источника выпадающего списка (выбор) работают он должен ...
• Когда человек выбран из раскрывающегося списка, api-call (еще не реализованный) вернет объект для заполнения 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 "не определен". Поэтому я создал «js-объект« teamPlayerDefault »с данными, подобными тому, что должно быть возвращено из вызова 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

Вы, вероятно, понял это сейчас, но я был в состоянии получить его связывание с -

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

Просто расширить, почему это, вы связывание «с» newOrExistingPlayer и необходимо активизировать уровень доступа к которой вы определили selectedPersonId