Javascript 使用主干模型和集合设计应用程序

Javascript 使用主干模型和集合设计应用程序,javascript,model-view-controller,design-patterns,backbone.js,Javascript,Model View Controller,Design Patterns,Backbone.js,我正在尝试使用主干网编写我的应用程序,我对它还相当陌生。我的应用程序基本上是向用户显示他的所有照片和相册。我对它的设计有一些疑问 从照片开始显然是模特的候选。所以 var Photo = Backbone.Model.extend({}) 然后我创建了一组照片 var PhotoCollection = Backbone.Collection.extend({}) 这是为了向用户显示“所有照片”、“特定日期上传的照片”等(注意它与相册不同) 现在我的问题是关于相册,相册是模特还是收藏品 在相

我正在尝试使用主干网编写我的应用程序,我对它还相当陌生。我的应用程序基本上是向用户显示他的所有照片和相册。我对它的设计有一些疑问

从照片开始显然是模特的候选。所以

var Photo = Backbone.Model.extend({})
然后我创建了一组照片

var PhotoCollection = Backbone.Collection.extend({})
这是为了向用户显示“所有照片”、“特定日期上传的照片”等(注意它与相册不同)

现在我的问题是关于相册,相册是模特还是收藏品

在相册视图中,我将以网格布局向用户显示他的所有相册,其中包含照片数量、相册名称和一些其他属性。因此,将相册作为主干模型,将相册集合作为主干集合是有意义的

但当用户点击相册时,我必须请求该相册中的所有照片。所以,这张专辑就成了一个收藏。但是,如果我把相册作为集合来写,我如何表示一组相册呢?它会是一个集合吗


我希望它听起来不会让人困惑。

根据经验,主干.Collection应该映射到一个REST集合资源,而
Model
应该映射到该集合中的一个项。这不是严格必要的,但主干的大部分都是围绕这种思维方式构建的。下面是一个例子:

/photos    -> PhotoCollection
/photos/id -> Photo
/albums    -> AlbumCollection
/albums/id -> Album
如果您有这样一个清晰的RESTful结构,那么我建议您构建模型结构来镜像它

当您开始在不同的模型之间建立关系时,主干不再那么固执己见,您可以自由地按照您想要的方式进行设置。通常,根据
is
has
关系来考虑不同模型之间的关系是最简单的。在您的例子中,这有点棘手,因为人们可能会认为
相册是照片的集合
,但是
相册也有照片

我倾向于使用
之间的关系,主要是因为
相册
可能不仅仅是一组照片,它将拥有自己的标题和其他类似属性。在RESTful术语中,集合不能有自己的任何属性。所以我们说相册有一个光收集

假设这些是您的
照片
光采集

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; });
  }
});
类似地,
相册
相册收藏

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
});
然后,您可以像访问任何其他照片集一样访问相册的照片:

album.get('photos').filterByDate('2012-12-24');
如果您需要相册
PhotoCollection
具有与正常
PhotoCollection
不同的行为,您可以简单地从基本集合扩展并使用它

var AlbumPhotoCollection = PhotoCollection.extend({ ... });

在不了解应用程序外观的情况下,很难进一步推测,但无论如何,这是一种很自然的方式。

非常好的书面和深思熟虑的答案。谢谢。