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

どうでもいい:

  • アルバムのタイトルバインディング
  • アルバムのジャンルバインディング
  • アルバムのアーティストバインディング

何が壊れているか:
binding = two-way binding (例: 曲名の編集中にトラックリストが更新されない)

  • トラックのタイトルバインディング
  • トラックのジャンルバインディング
  • トラックのアーティストバインディング

私は何を間違っていますか？

4

1 に答える 1

1

おっしゃるとおり、トラックの属性 (id、タイトルなど) はオブザーバブルとして作成されているのではなく、プレーンな JavaScript プリミティブとしてのみ作成されています。

次の 2 つのオプションがあると思います。

  1. すべて (モデル内のすべてのオブジェクトのすべてのプロパティ) を監視可能として作成する ko マッピング プラグインの使用を検討してください (その場合)。
  2. トラック プロパティの作成を関数にラップして、各トラック (およびそのプロパティ) を監視できるようにします。

最初のものを選択した場合は、マッピング プラグインのドキュメントを参照してください。

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

この 2 番目のバージョンでは、フィドルを少し変更してテストしました。

于 2012-10-31T12:46:10.050 に答える