1

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

相册的对象有这样的结构:

  • 专辑
    • 标题
    • 日期
    • 艺术家(数组)
      • 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));

什么

  • 专辑标题装订
  • 专辑流派绑定
  • 专辑艺术家绑定

出问题
绑定=双向绑定(例如在编辑歌曲名称时,曲目列表未更新)

  • 曲目的标题绑定
  • Track 的流派绑定
  • Track 的艺术家绑定

我究竟做错了什么?

4

1 回答 1

1

你是对的:你正在做的方式,轨道属性(id,标题等)没有被创建为可观察的,而只是作为普通的 javascript 原语。

我认为你有两个选择:

  1. 考虑使用 ko 映射插件,它会将所有内容(模型中所有对象的所有属性)创建为可观察的(如果是这样的话)。
  2. 将轨道属性的创建包装在一个函数中,以使每个轨道(及其属性)可观察。

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

如果您选择第二个,您可以像这样更改轨道属性的创建:

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

对于第二个版本,我稍微修改了你的小提琴来测试它。

于 2012-10-31T12:46:10.050 回答