title: Sort collection in template table on button press backboneJS
body: <p>I would like to sort a collection and then render it using backboneJS</p>
  
  <p>the template is</p>
  
  <pre><code>&lt;script type="text/template" id="user-list-template"&gt;
      &lt;a href="#" class="btn btn-primary" id="by-name"&gt;Sort By Name&lt;/a&gt;
      &lt;a href="#" class="btn btn-primary" id="by-salary"&gt;Sort by Salary&lt;/a&gt;
      &lt;a href="#" class="btn btn-primary" id="by-hire-date"&gt;Sort by Hire Date&lt;/a&gt;
  
      &lt;table class="table stripped"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Employee Number&lt;/th&gt;
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;
                  &lt;th&gt;Hire Date&lt;/th&gt;
                  &lt;th&gt;Salary&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;% _.each(users, function(user){ %&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;%= user.get('empNumber') %&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;%= user.get('firstName') %&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;%= user.get('lastName') %&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;%= user.get('hireDate') %&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;%= user.get('salary') %&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;% }); %&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And then the portion of the script that does the fectching</p>
  
  <pre><code>$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
          options.url = 'http://localhost:61855/api' + options.url;
      });
  
  
      var Users = Backbone.Collection.extend({
          sort_key: 'empNumber',
          url: '/UserModel',
          initialize: function() {
          },
          comparator: function(item) {
              return item.get(this.sort_key);
          },
          sortByField: function(fieldName) {
              this.sort_key = fieldName;
              this.sort();
          }
      });
  
  
  
      var UserList = Backbone.View.extend({
          el: '.page',
          render: function () {
              var that = this;
              var users = new Users();
              users.fetch({
                  success: function (users) {
                      var template = _.template($('#user-list-template').html(), { users: users.models });
                      that.$el.html(template);
                  }
              })
          }
      });
  
      var Router = Backbone.Router.extend({
          routes: {
              '': 'home'
          }
      });
      var userList = new UserList();
  
      var router = new Router();
  
      router.on('route:home', function () {
          userList.render();
      });
  
      Backbone.history.start();
  &lt;/script&gt;
  </code></pre>
  
  <p>I am a complete noob to backboneJS. basically on a button click I would like to render by that type. I assume that I need some kind of click event to be handled. Can someone point me in the right direction? </p>