使用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

您可以通过覆盖CollectionView方法更改CompositeView / appendHtml呈现项目的方式。你会想要做这样的事情：

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