Knockout.js: ObservableArray mit ObservableArrays innerhalb?

Question

Ich benutze dieses Plugin Dragula genannt, die eine ObservableArray als Quelle für die Daten benötigt ..

HTML/Knockout-Bindungen

<div class="widget-container"> 
       <div class="widget-content visible" id="team-setup"> 
        <div class="header"> 
         <p>Lagoppsett</p> 
         <p></p> 
        </div> 

        <div class="col-sm-12"> 
         <div class="row"> 
          <div class="widget-container"> 
           <div class="col-xs-6 widget-content visible"> 
            <div class="header"> 
             <p>Tilgjengelige spillere</p> 
             <p></p> 
            </div> 
            <div class="player-card-container-mini" data-bind="dragula: { data: availablePlayers, group: 'playerz' } "> 

             <div class="player-card-mini"> 
              <div class="player-card-left"> 
               <div class="player-avatar" style="margin-left: 85%;"> 
                <img src="Content/Images/player-female.png" id="imgAvatar" runat="server" /> 
                <div class="player-shirt-no" data-bind="text: ShirtNo"></div> 
               </div> 
              </div> 
              <div class="player-card-subtext"> 
               <div class="player-text"> 
                <div class="player-card-header-small" data-bind="text: PlayerName"></div> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
           <div class="col-xs-6 widget-content visible"> 
            <div class="header"> 
             <p>Lag</p> 
             <p></p> 
            </div> 
            <div data-bind="foreach: teamsetup"> 
            <div data-bind="foreach: SubTeams"> 
             <h1 data-bind="text: TeamSubName"></h1> 
             <div class="player-card-container-mini" data-bind="dragula: { data: Players, group: 'playerz' } " style="border: 1px solid red; min-height:200px"> 

              <div class="player-card-mini"> 
               <div class="player-card-left"> 
                <div class="player-avatar" style="margin-left: 85%;"> 
                 <img src="Content/Images/player-female.png" id="img1" runat="server" /> 
                 <div class="player-shirt-no" data-bind="text: ShirtNo"></div> 
                </div> 
               </div> 
               <div class="player-card-subtext"> 
                <div class="player-text"> 
                 <div class="player-card-header-small" data-bind="text: PlayerName"></div> 
                </div> 
               </div> 
              </div> 
             </div> 
            </div> 
            </div> 
           </div> 
         </div> 
        </div> 
        <div style="clear:both">&nbsp;</div> 
       </div> 
      </div> 

Knockout-Code:

var TeamSetupViewModel = function() { 
    var self = this; 
    self.teamsetup = ko.observableArray(); 
    self.availablePlayers = ko.observableArray(); 
    self.testPlayers = ko.observableArray(); 
} 
var model = new TeamSetupViewModel(); 

ko.applyBindings(model, document.getElementById("team-setup")); 

var uri = 'api/MainPage/GetTeamSetup/' + getQueryVariable("teamId"); 

$.get(uri, 
    function (data) { 
     model.teamsetup(data); 
     model.availablePlayers(data.AvailablePlayers); 
     model.testPlayers(data.AvailablePlayers); 
     console.log(data); 
    }, 'json'); 

}); 

Das Problem ist ..., dass ich ein ObservableArray am obersten Knoten habe, und ich brauche ObservableArrays weiter unten in der Hierarchie.

model.availablePlayers funktioniert gut, aber wenn die anderen Spieler in der HTML-Zugriff/ko foreach Schleifen durch teamsetup -> Subteams -> Spieler nicht aufgrund Spieler funktioniert nicht ein ObservableArray. (Es kann von 1 bis 7 SubTeams mit Spielern alles geben).

Wie kann ich die Spieler in jedem Subteams ein ObservableArray?

Siehe das Bild für die Datenstruktur:

Answer 1

Sie Mapping-Plugin verwenden könnte, aber wenn die Spieler das einzige, was Sie brauchen, können Sie es manuell tun:

Vereinfachen Sie Ihre Ansicht Modell :

Nachdem Sie die Daten vom Server erhalten haben, bevölkern Sie das Ansichtsmodell, das das Array von Spielern immer konvertiert y-Team zu einer beobachtbaren Array von Spielern:

$.get(uri, 
    function (data) { 
     model.availablePlayers(data.AvailablePlayers); 
     model.subTeams(data.SubTeams.map(function(t) { t.Players = ko.observableArray(t.Players); return t; })); 
    }, 'json'); 
}); 

Schließlich entfernen Sie die folgende Zeile in der Vorlage (mit seinem Schluss-Tag) - nichts iterieren mehr:

<div data-bind="foreach: teamsetup"> 

... und Update der Name der Eigenschaft in der nächsten Zeile, so dass es Kamel Fall wie in der VM ist:

<div data-bind="foreach: subTeams">