ノックアウト：観察可能な＆問題の初期化でバインディングを処理することができません

Question

私は周りにグーグルで行って、私が周りに見つけた例で私はできるようにこれを修正しようとしました。

ミッション：

• モーダルを開き、クリックした場合、既存のユーザー
• を選択するためのチェックボックスが表示されている - >ドロップダウンの ソースから選択して利用できる者と目に見えるドロップダウンが（選択）として動作します
• 人がドロップダウンから選択された場合、（まだ実装されていない）api-callは、newOrExistingPlayer observableを満たすオブジェクトを返し、フィールドにデータを表示します。
• ドロップダウンから選択した人がいない場合は、事前に人を選択していない新規登録です。

エラー：

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-objectを、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

あなたはおそらく今ではこれを考え出したが、私はそれはとの結合を取得することができたしている - ただ、これは、なぜ、あなたはnewOrExistingPlayer「で」結合し、あなたが定義した場所にアクセスするためにレベルをステップアップする必要がある上で展開する

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

selectedPersonId