用骨干模型和集合设计应用程序

sub*_*ime 2 javascript model-view-controller design-patterns backbone.js

我正在尝试使用骨干编写我的应用程序,而且我对它很新.我的应用程序基本上向用户显示他的所有照片和相册.我对它的设计有一些疑问.

从照片开始是模型的明显候选者.所以

var Photo = Backbone.Model.extend({})
Run Code Online (Sandbox Code Playgroud)

然后我创建了一系列照片.

var PhotoCollection = Backbone.Collection.extend({})
Run Code Online (Sandbox Code Playgroud)

这是为了向用户显示"所有照片","在特定日期上传的照片"等(注意其与专辑不同)

现在我的问题是关于专辑,专辑是模特还是收藏?

在专辑视图中,我将以网格布局显示用户的所有专辑,其中包括照片和专辑名称以及其他一些属性.因此,将专辑作为Backbone模型和专辑集合作为Backbone集合是有意义的.

但是当用户点击相册时,我必须请求该相册中的所有照片.所以,然后专辑成为一个集合.但如果我把专辑写成收藏,我该如何代表一组专辑呢?它会是收藏品的集合吗?

我希望这听起来并不令人困惑.

jev*_*lio 5

根据经验,a Backbone.Collection应映射到一个REST集合资源,并映射到该集合Model中的一个项目.这并不是绝对必要的,但Backbone的大部分都是围绕这种思维方式构建的.这是一个例子:

/photos    -> PhotoCollection
/photos/id -> Photo
/albums    -> AlbumCollection
/albums/id -> Album
Run Code Online (Sandbox Code Playgroud)

如果你有一个像这样的清晰RESTful结构,那么我建议你构建你的模型结构来镜像它.

当你开始建立不同模型之间的关系时,Backbone并不那么自以为是,你可以按照自己想要的方式自由设置.通常最简单的思考不同模型之间的关系ishas关系.在你的情况下,它有点棘手,因为人们可以这么认为Album is a collection of photos,但也是如此Album has photos.

我倾向于在has这里建立一种关系,主要是因为它Album可能不只是一组照片 - 它将拥有一个标题和其他自己的属性.在RESTful术语中,集合不能拥有自己的任何属性.所以我们这样说Album has a PhotoCollection.

比方说,这些都是你PhotoPhotoCollection:

var Photo = Backbone.Model.extend({});

var PhotoCollection = Backbone.Collection.extend({
  model: Photo,
  filterByDate: function(date) {
    //just some method
    return this.filter(function(photo) { return photo.get('date') === date; });
  }
});
Run Code Online (Sandbox Code Playgroud)

同样的AlbumAlbumCollection.

var Album = Backbone.Model.extend({
  initialize: function(attributes) {
    //make model.photos a PhotoCollection and initialize it with passed photos
    this.set('photos', new PhotoCollection(attributes.photos || []);
  }
});

var AlbumCollection = Backbone.Collection.extend({
  model: Album
});
Run Code Online (Sandbox Code Playgroud)

然后您可以像访问任何其他照片集一样访问相册的照片:

album.get('photos').filterByDate('2012-12-24');
Run Code Online (Sandbox Code Playgroud)

如果您需要相册PhotoCollection具有与普通相同的行为PhotoCollection,则可以简单地从基本集合扩展并使用它.

var AlbumPhotoCollection = PhotoCollection.extend({ ... });
Run Code Online (Sandbox Code Playgroud)

如果不了解应用程序的外观,就很难进一步推测,但无论如何这都是一种自然的方式.