1

我有一个无限滚动的页面。该页面最初加载了 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>

我在思考如何渲染它时遇到了麻烦。我在想一个产品可能是一个骨干模型：

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

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

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

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

4

1 回答 1

0

你应该有一个产品集合，一个产品模型，一个页面视图，然后是每个产品的视图。这个想法是从页面视图中获取一个集合，然后循环通过它来呈现每个产品。

拥有每个产品的视图的好处是您可以轻松地为每个产品分配事件（如点击事件）。

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

看看这个包含无限滚动和主干的例子。

于 2012-12-04T10:55:03.867 回答