CODEWITHSUNDEEP
backbone.jsmarionette
udexter
udexter

Reputation: 2347

Complex rendering using CompositeView, Collection and ItemView

I have a CompositeView, Collection and ItemView working fine. It's actually fetching my results and it's awesome. My problem, I've to build a list (using <li>) but splitting every 3 items.

The render output should be like this:

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

I've successfully rendered a <ul> containing all the list elements but... how I can make something like the above output? I don't really know how to start.

Thanks in advance!

Upvotes: 2

Views: 102

Answers (1)

Andrew Hubbs
Andrew Hubbs

Reputation: 9426

You can change the way your CollectionView/CompositeView renders items by overriding the appendHtml method. You will want to do something like this:

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

Upvotes: 2

Related Questions