title: Backbone collection not refreshing after sorting
body: <p>I'm modifying the <a href="https://github.com/davidsulc/marionette-gentle-introduction" rel="nofollow">https://github.com/davidsulc/marionette-gentle-introduction</a> by adding sorting possibility to the table. Looks like I've done thing i need to make it work, but the table is no being refreshed.</p>
  
  <p>1) the collection:
  <a href="https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/contact.js" rel="nofollow">original collection code</a></p>
  
  <pre><code>Entities.DeviceCollection = Backbone.Collection.extend({
      url: "/devices",
      model: Entities.Device,
      sortAttribute: "type",
      sortDirection: 1,
      sortDevices: function(attr) {
          this.sortAttribute = attr;
          this.sort();
      },
      comparator: function(a, b) {
          var a = a.get(this.sortAttribute),
                  b = b.get(this.sortAttribute);
  
          if (a == b)
              return 0;
  
          if (this.sortDirection == 1) {
              return a &gt; b ? 1 : -1;
          } else {
              return a &lt; b ? 1 : -1;
          }
      }
  });
  </code></pre>
  
  <p>2) the View: <a href="https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_view.js" rel="nofollow">original view code</a></p>
  
  <pre><code>View.Devices = Marionette.CompositeView.extend({
      tagName: "table",
      className: "table table-hover",
      template: listTpl,
      emptyView: NoDevicesView,
      itemView: View.Device,
      itemViewContainer: "tbody",
      sortUpIcon: 'glyphicon glyphicon-chevron-up',
      sortDnIcon: 'glyphicon glyphicon-chevron-down',
      events: {
          "click th": "headerClick"
      },
      initialize: function() {
          this.listenTo(this.collection, "sort reset", function() {
              console.log("Sort RESET");
              this.appendHtml = function(collectionView, itemView, index) {
                  collectionView.$el.append(itemView.el);
              }
          });
      },
      onRender: function() {
          this.$el.find('th div')
                  .append($('&lt;span&gt;'))
                  .closest('thead')
                  .find('span')
                  .addClass('sort-ic icon-none')
                  .end()
                  .find('[column="' + this.collection.sortAttribute + '"] span')
                  .removeClass('icon-none').addClass(this.sortUpIcon);
      },
      onCompositeCollectionRendered: function() {
          this.appendHtml = function(collectionView, itemView, index) {
              collectionView.$el.prepend(itemView.el);
          }
      },
      headerClick: function(e) {
          var $el = $(e.currentTarget),
                  ns = $el.attr('column'),
                  cs = this.collection.sortAttribute;
          console.log('ns:' + ns);
  
          // Toggle sort if the current column is sorted
          if (ns == cs) {
              this.collection.sortDirection *= -1;
          } else {
              this.collection.sortDirection = 1;
          }
  
          // Adjust the indicators.  Reset everything to hide the indicator
          $el.closest('thead').find('span').attr('class', 'icon-none');
  
          // Now show the correct icon on the correct column
          if (this.collection.sortDirection == 1) {
              $el.find('span').removeClass('icon-none').addClass(this.sortUpIcon);
          } else {
              $el.find('span').removeClass('icon-none').addClass(this.sortDnIcon);
          }
  
          // Now sort the collection
          this.collection.sortDevices(ns);
      }
  });
  </code></pre>
  
  <p>Here I add the listener to sort to refresh the view, but it is not working</p>
  
  <pre><code>initialize: function () {
  this.listenTo(this.collection, "sort reset", function() {
      console.log("Sort RESET");
      this.appendHtml = function(collectionView, itemView, index) {
          collectionView.$el.append(itemView.el);
      }
  });
  },
  </code></pre>
  
  <p>Where can the problem be?</p>