如何在Knockout.js中绑定嵌套选项

Question

我有一个基于淘汰赛的专辑编辑界面

相册的对象具有以下结构：

• 专辑
  • 标题
  • 日期
  • 艺术家（数组）
    • ID
    • 标题
  • 流派（数组）
    • ID
    • 标题
  • 曲目（数组）
    • ID
    • 标题
    • 艺术家（数组）
      • ID
      • 标题
    • 流派（数组）
      • ID
      • 标题

我创建了一个小提琴来展示我的工作及其问题 。

我认为问题出在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));

很好 ：

• 专辑的标题绑定
• 专辑的类型绑定
• 专辑的艺术家绑定

什么是坏了 ：
绑定=双向绑定（例如，在编辑歌曲名称时，曲目列表未更新）

• 曲目的标题绑定
• 曲目的类型绑定
• 曲目的艺术家绑定

我究竟做错了什么？

Answer 1

您说对了：您所做的方式，track属性（id，title等）并未创建为可观察对象，而只是创建为纯JavaScript原语。

我认为您有两种选择：

1. 考虑使用ko映射插件，它将创建可观察的所有内容（模型中所有对象的所有属性）（如果是这种情况）。
2. 将轨道属性的创建包装在函数中，以使每个轨道（及其属性）都可观察。

如果选择第一个，请查看映射插件文档 。

如果选择第二个，则可以像下面那样更改tracks属性的创建：

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

对于第二个版本， 我对您的小提琴做了一些修改以对其进行测试。