title: The best way to sort a collection in a CompositeView
body: <p>I am trying to sort a collection in a <code>Marionette.CompositeView</code>.<br>
  I have a collection which looks like this:      </p>
  
  <pre><code>[
     {id: 1, name: 'bar'},
     {id: 2, name: 'boo' },
     {id: 3, name: 'foo' }
  ]
  </code></pre>
  
  <p>I need to sort the collection by id in reverse order.<br>
  Actually it work only when I reload the page.<br>
  When I add a new model, the new item is added apparently random to the list.<br>
  If I refresh the page, they will be well sorted.      </p>
  
  <p>My questions are:<br>
  1) how to fix the problem when I add a new model?<br>
  2) it will be possible to improve the code?      </p>
  
  <hr>
  
  <p>Here is my code:</p>
  
  <pre><code>return Marionette.CompositeView.extend({
  
      initialize: function () {
          this.collection.fetch();
      },
  
      onRender: function () {
          var collection =  this.collection;
  
          collection.comparator = function (collection) {
              return - collection.get('id');
          }
      },
  
      onSuccess: function () {
          this.collection.add(this.messageModel);
          this.collection.sort(); // the messageModel seems to be added 
                                  // apparently randomly to the list. 
                                  // only if I refresh the page it will be ok
      }
  })
  </code></pre>