Question

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

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

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

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

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

照片视图正在收听一个集合，在重置事件中，它会为要显示的所有照片创建EveryPhotoView。然后，EachPhotoView将侦听与其关联的模型以进行更改事件。

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

所以我的问题是，使用多个空主干模型填充集合是一个好主意，并且将来当我实际获得这些模型时，将它们从集合中替换。这将解决我有占位符的问题。还有其他方法吗？

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

Answer 1

如果我理解正确的话，你会有一个缩略图网格（例如30张缩略图）和后退/前进按钮。

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

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" />

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

2 个答案: