Javascript 在主干中动态加载嵌套模型和集合

我的主干应用程序如下所示：

// Model for one picture
var Picture= Backbone.Model.extend({ });

// Model for Collection of Pictures
var Pictures = Backbone.Collection.extend({ model:Picture });

// Model for album
var Album = Backbone.Model.extend();

//Model for a collection of Albums
var Albums = Backbone.Collection.extend({ model:Album });

我的服务器支持以下功能

List<Album> GetAlbums(List<Guid> albumIds);
List<Picture> GetPictures(albumId);
Dictionary<string, string> GetAlbumMetadata(albumId);
Dictionary<string, string> GetPictureMetadata(pictureId);

List-GetAlbums（列出AlbumID）；
列表GetPictures（albumId）；
字典GetAlbumMetadata（albumId）；
字典GetPictureMetadata（pictureId）；

我的页面以最初加载的一个或多个相册开始

它应该首先得到一个专辑列表

然后加载所有相册的元数据

然后它加载每个相册中的图片

然后加载每个图片的元数据

我不能从一个服务器端调用加载所有内容，因为这很昂贵，所以我必须动态加载

是否有一种简单、特定于主干网的方式来动态加载所有这些内容？目前，我正在读取每个函数的fetch（）返回的JSON，然后根据每个调用返回的结果进行下一个函数调用

---

必须有一种更优雅的方法来实现这一点。

这是我可能的解决方案，我依赖于

初始化

方法。 最好从底部读取代码，顺序因定义而颠倒。对不起，我没有测试代码

// Model for one picture
var Picture = Backbone.Model.extend({
    // use urlRoot
    // if after "pictures" fetch picture has an 'id' property,
    // it will be appended to urlRoot on "picture" fetch
    urlRoot: '/picture/metadata',
    initialize: function() {
        // get metadata for current picture
        this.fetch();
    }
});

// Model for Collection of Pictures
var Pictures = Backbone.Collection.extend({
    model: Picture,
    initialize: function(models, options) {
        // get passed album id
        this.album_id = options.album_id;
        // automatically fetch pictures when collection is created from album model
        // When items are fetched, Picture models are automatically created
        // and their 'initialize' method is called
        this.fetch();
    },
    // url property may be a function too
    url: function() {
        return '/pictures/' + this.album_id;
    }
});

// Model for album
var Album = Backbone.Model.extend({
    // use urlRoot
    // if after "albums" fetch album has an 'id' property,
    // it will be appended to urlRoot on "album" fetch
    urlRoot: '/album/metadata',
    initialize: function() {
        // get metadata for current album
        this.fetch();

        // initialize pictures collection for current album
        // pass album id
        var pictures = new Pictures([], { album_id: this.get('id') });
        this.set('pictures', pictures);
    }
});

//Model for a collection of Albums
var Albums = Backbone.Collection.extend({
    url: '/albums'
    model: Album
});

// Create albums collection
var albums = new Albums();

// Get specific albums by ids
// When items are fetched, Album models are automatically created
// and their 'initialize' method is called
albums.fetch({
    data : {
        ids: [1,2,3,4,5]
    }
});

---

最初你有专辑ID，对吗？照片ID来自哪里？是的。相册对象有一个列表，它是该相册中所有图片的id。这太棒了。非常感谢。