backbone.js - 使用 CompositeView、Collection 和 ItemView 进行复杂渲染

Question

我有一个 CompositeView、Collection 和 ItemView 工作正常。它实际上正在获取我的结果，这非常棒。我的问题是，我必须构建一个列表(使用 <li> )，但每 3 个项目拆分一次。

渲染输出应该是这样的:

<div id="feed">
    <ul class="feed">
        <li><img src="assets/img/1.jpg"></li>
        <li><img src="assets/img/2.jpg"></li>
        <li><img src="assets/img/3.jpg"></li>
    </ul>

    <ul class="feed">
        <li><img src="assets/img/4.jpg"></li>
        <li><img src="assets/img/5.jpg"></li>
        <li><img src="assets/img/6.jpg"></li>
    </ul>
</div>

我已经成功渲染了 <ul>包含所有列表元素但是...我如何才能做出类似上面的输出？我真的不知道如何开始。

提前致谢!

Answer 1

您可以通过重写 appendHtml 方法来更改 CollectionView/CompositeView 呈现项目的方式。你会想做这样的事情:

appendHtml : function (collectionView, itemView, index) {
  if (! index % 3) {
    this.$("#id").append("<ul class='feed'/>");
  }
  this.$("#id ul:last").append(itemView.el);
}