我有一个基于 knockout 的专辑编辑界面
相册的对象具有这样的结构:
- 相册
- 标题
- 日期
- 艺术家(数组)
- ID
- 标题
- 流派(数组)
- ID
- 标题
- 轨道(数组)
- ID
- 标题
- 艺术家(数组)
- ID
- 标题
- 流派(数组)
- ID
- 标题
我创建了 fiddle展示我的工作和问题。
我认为问题出在 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));
什么是好的:
- 相册的标题绑定(bind)
- 专辑的流派绑定(bind)
- 专辑的艺术家绑定(bind)
什么损坏:
绑定(bind) = 双向绑定(bind)(例如,在编辑歌曲名称时,轨道列表不会更新)
- 轨道的标题绑定(bind)
- 轨道的流派绑定(bind)
- 跟踪艺术家绑定(bind)
我做错了什么?
最佳答案
你是对的:按照你的方式,轨道属性(id、标题等)不会被创建为可观察对象,而只是作为普通的 javascript 基元创建。
我认为你有两个选择:
- 考虑使用 ko 映射插件,该插件会将所有内容(模型中所有对象的所有属性)创建为可观察的(如果是这种情况)。
- 将 track 属性的创建封装在函数中,以使每个轨道(及其属性)可观察。
如果您选择第一个,请查看mapping plugin documentation .
如果您选择第二个,您可以像这样更改 track 属性的创建:
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
}
}))
对于第二个版本,I modified your fiddle稍微测试一下。
关于javascript - 如何在knockoutjs中绑定(bind)嵌套选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13157046/