Knockout.js : ObservableArray with ObservableArrays inside?

Question

I'm using this plugin called Dragula which needs an ObservableArray as a source for the data..

HTML/Knockout-bindings


                
                    
                        Lagoppsett
                        
                    

                    
                        
                            
                                
                                    
                                        Tilgjengelige spillere
                                        
                                    
                                    

                                        
                                            
                                                
                                                    
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                
                                            
                                        
                                    
                                
                            
                                
                                    
                                        Lag

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

});

The problem is... that i'm having a ObservableArray at the top node, and i do need ObservableArrays further down in the hierarchy.

model.availablePlayers works fine, but when accessing the other players in the html/ko foreach loops through teamsetup -> SubTeams -> Players it doesn't work due to Players isn't an ObservableArray. (There might be everyting from 1 to 7 SubTeams with players).

So how can i make the Players in each SubTeams an ObservableArray ?

See the image for the datastructure :

Maciej Grzyb · Accepted Answer

You could use Mapping plugin, but if players is the only thing you need, you can do it manually:

Simplify your view model:

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

After you get the data from the server, populate the view model converting the array of players on every team to an observable array of players:

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

Finally, remove the following line in your template (with its closing tag) - nothing to iterate over anymore:

... and update the name of the property in the next line, so it is camel case like in the VM:

Knockout.js : ObservableArray with ObservableArrays inside?

Answers (1)

Related Questions