Question

I have an album edit interface based on knockout

Album’s object have such structure:

• album
  • title
  • date
  • artists (array)
    • id
    • title
  • genres (array)
    • id
    • title
  • tracks (array)
    • id
    • title
    • artists (array)
      • id
      • title
    • genres (array)
      • id
      • title

I created a fiddle to show my work and problems with it.

I think that problem is in tracks: ko.observableArray(album.tracks):

var initialData = […];

var AlbumsModel = function(album) {
    var self = this;
    self.albums = ko.observableArray(ko.utils.arrayMap(album, function(album) {
        return {
            title: album.title,
            image: album.image,
            artists: ko.observableArray(album.artists),
            date: album.date,
            genres: ko.observableArray(album.genres),
            composers: ko.observableArray(album.composers),
            lyricists: ko.observableArray(album.lyricists),
            tracks: ko.observableArray(album.tracks)
        }
    }));
            self.lastSavedJson = ko.observable('')
    self.save = function(formElement) {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.albums), null, 2));
    };
};

ko.applyBindings(new AlbumsModel (initialData));

What’s fine:

• Album’s title binding
• Album’s genres binding
• Album’s artists binding

What’s broken:
binding = two-way binding (e.g. while editing song name, tracklist is not updating )

• Track’s title binding
• Track’s genres binding
• Track’s artists binding

What am I doing wrong?

Answer 1

You are right: the way you’re doing, the tracks attributes (id, title etc.) are not being created as observables, but only as plain javascript primitives.

I think you have two options:

1. consider using the ko mapping plugin, which would create everything (all the properties of all the objects in your model) as observable (if that’s the case).
2. wrap the creation of the tracks property in a function to make each track (and its properties) observable.

If you choose the first one, take a look at the mapping plugin documentation.

If you choose the second one, you can change the creation of the tracks property like this:

tracks: ko.observableArray(ko.utils.arrayMap(album.tracks,
    function(track) {
        return {
            id: track.id,
            title: ko.observable(track.title),
            artists: track.artists,
            date: track.date,
            genres: track.genres,
            composers: track.composers,
            lyricists: track.lyricists,
            lyrics: track.lyrics
        }
    }))

For this second version, I modified your fiddle a little bit to test it.