0

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

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

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

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

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

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

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

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

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

4

2 回答 2

1

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

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

这段代码是如何设置分页集合和分页视图的一个很好的例子。

于 2013-02-08T01:20:22.663 回答
0

我想，每一个Model已经存在的地方都已经有一个与之关联的记录。如果没有，您Data Source应该包含它们，并且您的客户端View将根据该Collection记录呈现它们。唯一缺少的是，Image目前这些记录中的某些记录不可用。

Those Models will have a property of imgSource that will be empty. Your View will then handle and perform a check if whether the imgSource property is empty and replace it some default Thumbnail.

<img src="<%- imgSource ==='' ? '/images/default.jpg' : '/images/'+ imgSource %>" 
   alt="imgDesc" />
于 2013-02-08T18:42:44.113 回答