Date Header

dateheader.js

  // Grid Date Header
  joli.ui.GridDateView = Backbone.View.extend({
    tagName: 'li',
    className: 'joli-grid-date',
    template: 'joli-template-grid-date',
    
    initialize: function() {
      _.bindAll(this, 'render');
      this.model.bind('change', this.render);
    },
    
    render: function() {
      var attributes = this.model.toJSON();
      $(this.el).html(ich[this.template]({
        date: attributes.date.slice(0, 10)
      }));
      return this;
    }
  });


  addItem: function(item) {
      if (this._previousItemDate != undefined) {
        if (this._previousItemDate != item.attributes.date.slice(0, 10)) {
          var view = new joli.ui.GridDateView({ model: item });
          $('.joli-grid-list').append(view.render().el);
        }
      }
      var view = new joli.ui.GridItemView({ model: item });
      $('.joli-grid-list').append(view.render().el);
      this._previousItemDate = item.attributes.date.slice(0, 10);
    },

  <script id="joli-template-grid-date" type="text/html">
    <h2>{{ date }} <span><strong>{{ total }}</strong> items</span></h2>
  </script>