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

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

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