Question

我有一个无限滚动的页面。该页面最初加载3个标签。每个部分包含从我的数据库中提取的3个产品图像（不仅仅是图像，还包括产品信息）。下划线模板将是这样的：

<section>
  <div class='left'>
    <img src="{{ product.src }}" />
  </div>
  <div class='right'>
    <div class='top'>
      <img src="{{ product.src }}" />
    </div>
    <div class='bottom'>
      <img src="{{ product.src }}" />
    </div>
  </div>
</section>

我无法思考如何渲染它。我认为产品可能是一个Backbone模型：

var ProductModel = Backbone.Model.extends({
  defaults: {
    src: '',
    title: 'Product'
    brand: 'ABC'
  }
});

然后下一部分我卡住了。在我看来，集合就像数据列表。但是，在这种情况下，我不希望显示整个产品列表，我只想要3个产品。那么View怎么样？视图是应该一次渲染所有3个图像还是应该一次渲染一个图像（如调用渲染3次）？请记住，我仍然需要渲染其他2个部分（并且所有部分都显示不同的产品）。

我应该控制我的HTTP GET调用，一次只响应3张图像，还是应该让它返回所有产品？

有人可以帮助我或指出一些类似用例的例子。

Answer 1

您应该有一个产品集合，一个产品模型，一个页面视图，然后是每个产品的视图。我们的想法是从页面视图中获取一个集合，然后遍历它以呈现每个产品。

拥有每个产品视图的优势在于您可以轻松地为每个产品分配事件（如点击事件）。

从HTTP GET获得的图像数量取决于使用和开销。您可能需要考虑在API中添加变量，以便应用程序控制您在回复中获得的图像数量。

看一下包含无限滚动和主干的example。

使用Backbone一次渲染3个图像

1 个答案: