backbone sort

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
<div id="main-region">region</div>

<script id="user-item-tpl" type="text/template">
    <%= id %> | <%= name %>
</script>

<script id="user-list-tpl" type="text/template">        
    <a href="#">Sort</a>
</script>

JavaScript

var mainApp = new Backbone.Marionette.Application();

mainApp.addRegions({		
		mainRegion	: "#main-region"
});

var UserModel = Backbone.Model.extend();

var UserView = Backbone.Marionette.ItemView.extend({
    template: '#user-item-tpl'
});

var UserCollection = Backbone.Collection.extend({
    model: UserModel,
    url: '/api/get_user.json'
});

var UserListView = Backbone.Marionette.CompositeView.extend({
    template: '#user-list-tpl',
    itemView: UserView,
    events: {
        'click a' : 'doSort'
    },
    doSort: function(){
        this.collection.comparator = 'id';
        this.collection.sort();
        this.collection.trigger('reset');
    }
});


    var coll = new UserCollection([
        {id: 3, name: 'Peter'},
        {id: 1, name: 'Tom'},
        {id: 2, name: 'Mary'}
    ]);

var view = new UserListView({
    collection: coll
});

mainApp.mainRegion.show(view);