backbone sort

by chitocheng

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>
test
<div id="main-region"></div>

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

JavaScript

Marionette.Region.prototype.open = function(view){
    console.log('prototype region open');
    this.$el.empty().append(view.el);
};

Marionette.Region.prototype.on('show', function(){
    console.log('prototype region show');
});

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

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

var UserModel = Backbone.Model.extend();

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

var UserCollection = Backbone.Collection.extend({});

var UserListView = Backbone.Marionette.CompositeView.extend({
    className: 'user-view',
    tagName: 'div',
    itemView: UserView,
    itemViewContainer: '.user-list'
    template: '#user-list-tpl',
    events: {
        
    },
    collection: new UserCollection([
        {id: 3, name: 'Peter'},
        {id: 1, name: 'Tom'},
        {id: 3, name: 'Mary'}
    ]),
    initialize: function(){
        
    },
    onShow: function(){
        /** where I execte the fetch() function **/
        //this.collection.fetch();
        console.log('view-show');
    }
});
    mainRegion.show(new UserListView());