title: Collection Sorting not working on Backbone.Marionette using restful Services
body: <p>I am building a collection on Backbone.Marionette heavily basing myself on the example provided by David Sulc on his book 'A Gentle Introduction to Backbone.Marionette' available here <a href="https://github.com/davidsulc/marionette-gentle-introduction/commit/175fc9b7bddfa6fea86954eb769c0cfb3e163c1e" rel="nofollow">https://github.com/davidsulc/marionette-gentle-introduction/commit/175fc9b7bddfa6fea86954eb769c0cfb3e163c1e</a>.</p>
  
  <p>for the moment i am still doing everything inline:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Marionette Contact Manager&lt;/title&gt;
      &lt;link href="./css/bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="./css/application.css" rel="stylesheet"&gt;
      &lt;link href="./css/jquery-ui-1.10.0.custom.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;span class="brand"&gt;Secret Identities&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="main-region" class="container"&gt;
      //main area
  &lt;/div&gt;
  
  &lt;script type="text/template" id="contact-list-item"&gt;
      &lt;td&gt; &lt;%= lastName %&gt;&lt;/td&gt;&lt;td&gt; &lt;%= firstName %&gt; &lt;/td&gt;&lt;td&gt; &lt;%= occupation %&gt; &lt;/td&gt;
  &lt;/script&gt;
  
  &lt;script type="text/template" id="contact-list"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;First Name&lt;/th&gt;
          &lt;th&gt;Last Name&lt;/th&gt;
          &lt;th&gt;Occupation&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/script&gt;
  
  &lt;script src="./js/vendor/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="./js/vendor/json2.js"&gt;&lt;/script&gt;
  &lt;script src="./js/vendor/underscore.js"&gt;&lt;/script&gt;
  &lt;script src="./js/vendor/backbone.js"&gt;&lt;/script&gt;
  &lt;script src="./js/vendor/backbone.marionette.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      var Application = new Marionette.Application();
  
      Application.addRegions({
          mainRegion: "#main-region"
      });
  
      Application.Contact = Backbone.Model.extend({
          urlRoot: "/rest/example/listHeroes"
  
      });
  
      Application.ContactCollection = Backbone.Collection.extend({
          model: Application.Contact,
          url: "/rest/example/listHeroes",
          comparator: "firstName"
      });
  
      Application.ContactItemView = Marionette.ItemView.extend({
          tagName: "tr",
          template: "#contact-list-item"
      });
  
      Application.ContactsView = Marionette.CompositeView.extend({
          tagName: "table",
          className: "table table-hover",
          template: "#contact-list",
          itemView: Application.ContactItemView,
          itemViewContainer: "tbody"
      });
  
  
      Application.on("initialize:after", function () {
          var list = new Application.ContactCollection;
          list.fetch();
          var contactsView = new Application.ContactsView({
              collection: list
          });
  
  
          Application.mainRegion.show(contactsView);
      });
  
      Application.start();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the Json Array returned by the rest get is</p>
  
  <pre><code>[{"firstName":"Bruce","lastName":"Wayne","occupation":"Industrialist"},{"firstName":"Steve","lastName":"Rogers","occupation":"Soldier"},{"firstName":"Natasha","lastName":"Romanov","occupation":"spy"},{"firstName":"Clark","lastName":"Kent","occupation":"Reporter"},{"firstName":"Hal","lastName":"Jordan","occupation":"Pilot"}]
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>