Knockout.js: GözlemlenebilirArray'lar içeride? Ben veriler için bir kaynak olarak bir ObservableArray ihtiyacı Dragula denilen bu eklentiyi kullanıyorum

Question

..

HTML/Nakavt-bağlamaları

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

Nakavt kodu:

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'); 

}); 

Sorun şu ki ... benim en üst düğüme bir Gözlem Çubuğu geçiriyorum ve Gözlemlenebilir Dizileri hiyerarşide daha aşağıya inmem gerekiyor.

çalışıyor model.availablePlayers ancak html diğer oyuncuları erişirken/ko foreach teamsetup döngüsü -> alt-takim -> nedeniyle Oyuncular çalışmıyor oyuncular değil bir ObservableArray. (Oyuncularla 1'den 7'ye kadar SubTeams).

Peki ben oyuncu her alt-takim bir ObservableArray içinde yapabilir?

Answer 1

Eşleme eklentisi kullanabilirsiniz, ama oyuncular ihtiyacınız olan tek şey ise, elle yapabilirsiniz:

veri tipleri de görüntü bakın

görüşünüz modelini basitleştirme : sunucudan veri almak sonra

var TeamSetupViewModel = function() { 
    var self = this; 
    self.availablePlayers = ko.observableArray(); 
    self.subTeams = ko.observableArray(); 
} 

, şimdiye kadar oyuncuların dizi dönüştürme görünüm modeli doldurmak Bir gözlemlenebilir oyuncuların diziye y takımı:

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

Son olarak, (onun kapanış etiketiyle) şablonunuzdan aşağıdaki satırı kaldırmak - hiçbir şey artık tekrarlatacak:

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

... ve güncelleme bir sonraki satırda özelliğin adı, bu deve durumda VM gibidir böylece:

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