title: How to render a Backbone collection with headers between items
body: <p>I have a Backbone collection in my app that is basically a timeline. Every item in the collection has a <code>date</code> field and the collection is sorted by it. Items are dynamically loaded and added to this collection (when scolling).</p>
  
  <p>I want to render this collection, but I also need to render a <code>&lt;div&gt;</code> between the items as a day header. Example:</p>
  
  <pre class="lang-js prettyprint-override"><code>[{"date": new Date("2015-01-02T12:00"),
    "text: "Message 4"},
   {"date": new Date("2015-01-02T06:00"),
    "text: "Message 3"},
   {"date": new Date("2015-01-01T23:00"),
    "text: "Message 2"},
   {"date": new Date("2015-01-01T20:00"),
    "text: "Message 1"}
  ]
  </code></pre>
  
  <p>I want to render something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="timeline"&gt;
    &lt;div class="day"&gt;2015-01-02&lt;/div&gt;
    &lt;div class="message"&gt;Message 4&lt;/div&gt;
    &lt;div class="message"&gt;Message 3&lt;/div&gt;
    &lt;div class="day"&gt;2015-01-01&lt;/div&gt;
    &lt;div class="message"&gt;Message 2&lt;/div&gt;
    &lt;div class="message"&gt;Message 1&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Or like this (nested):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="timeline"&gt;
    &lt;div class="day"&gt;2015-01-02
      &lt;div class="message"&gt;Message 4&lt;/div&gt;
      &lt;div class="message"&gt;Message 3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="day"&gt;2015-01-01
      &lt;div class="message"&gt;Message 2&lt;/div&gt;
      &lt;div class="message"&gt;Message 1&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have been looking at <a href="https://github.com/andreypopp/backbone.projections" rel="nofollow">Backbone.Projections</a> but it seems that I would need to manually create a lot of filtered collections (one collection for each day) and then put all those daily collections into yet another collection.</p>
  
  <p>I have also looked at the <code>Backbone.Collection.groupBy</code> but I don't see how I can use that to render views, let alone how to keep the groups updated when new items are added to the timeline.</p>
  
  <p>Is there a good way to render a timeline collection like this? Any plugins that would help?</p>