使用空模型作为占位符填充主干集合

Question

我正在使用主干编写一个 Web 应用程序。我将在网页上以网格格式显示缩略图列表。

我创建了一个名为 PhotosView 的视图，它正在监听主干集合

PhotosView = Backbone.View.extend({
    template: _.template( $('#container').html() ),

然后，我为每张照片创建了另一个视图，代表该列表中的每个缩略图

EachPhotoView = Backbone.View.extend({
    template: _.template($('#thumbnail').html()),

Photos 视图正在监听一个集合，并在重置事件时为所有要显示的照片创建 EachPhotoView。然后，每个PhotoView 都会监听与其关联的模型以获取更改事件。

我现在正在尝试对这些缩略图进行分页。我现在只要求查看那些缩略图，但我仍然必须为所有图像创建占位符。

所以我的问题是，用空骨干模型的数量填充集合是否是个好主意，并且将来当我真正获得这些模型时，从集合中替换它们。这将解决我有占位符的问题。有没有其他方法可以做到这一点？

---

编辑：我说的是缩略图的网格布局，比如单个页面上的 500 个，当您向下滚动时，我请求这 500 个中的部分。我必须创建所有占位符（全部 500 个）缩略图，因为这会给容器 div 适当的高度（对于 500 个图像），所以我必须在集合中拥有所有 500 个模型（虽然是虚拟的），这将帮助我将视图上的事件附加到那些空模型，并且当我获得这些缩略图元数据时，我'将其添加到集合中的相应模型中。

Answer 1

如果我理解正确，您将有一个缩略图网格（比如 30 个缩略图）和后退/前进按钮。

我要做的是让您的收藏仅代表视图中的项目，并使用您的后退/前进按钮来更改 this.page 属性，然后重新fetch() 整个收藏（将 30 个缩略图替换为 30 on下一页）。

This piece of code 是一个很好的例子，展示了如何设置分页集合和分页视图。

Answer 2

我认为，每个现有的Model 已经在某处有与之关联的记录。如果没有，您的 Data Source 应该包含它们，并且您的客户端 View 将根据 Collection 记录呈现它们。唯一缺少的是，对应的Image 目前不适用于其中一些记录。

那些Models 将具有imgSource 的属性，该属性将为空。然后，您的 View 将处理并检查 imgSource 属性是否为空，并将其替换为默认的 Thumbnail。

<img src="<%- imgSource ==='' ? '/images/default.jpg' : '/images/'+ imgSource %>" 
   alt="imgDesc" />