Backbone.Marionette CollectionViews are awesome, but they don't support collection re-ordering out of the box. The library provides some documentation to order CollectionViews and CompositeViews, but it's based on the children already inserted. I prefer my views to reflect the state of my models and collections.

README.md

Backbone.Marionette CollectionViews are awesome, but they don't support collection re-ordering out of the box. The library provides some documentation to order CollectionViews and CompositeViews, but it's based on the children already inserted. I prefer my views to reflect the state of my models and collections.

Backbone.Marionette.OrderedCollectionView.js

'use strict';

Marionette.SortedCollectionView = Marionette.CollectionView.extend({

    /**
     * Given a model, function tries to find the correct itemView based on the
     * model's cid. Returns itemview or null
     * @param  model
     * @return itemView/null
     */
    getItemViewByModel: function(model) {
        var viewId;

        if (model) {
            viewId = this.children._indexByModel[model.cid];
            return viewId ? this.children._views[viewId] : null;
        } else {
            return null;
        }
    },

    /**
     * The default implementation of 'appendHtml' but overriden in order to have ordered visual track items.
     * @param  collectionView
     * @param  itemView
     * @param  index
     */
    appendHtml: function(collectionView, itemView, index) {
        var childrenContainer = collectionView.itemViewContainer ? collectionView.$(collectionView.itemViewContainer) : collectionView.$el,
            collection = collectionView.collection,
            previousModel, previousView;

        // If the index of the model is at the end of the collection append, else insert at proper index
        if (index >= collection.size() - 1) {
            childrenContainer.append(itemView.el);
        } else {
            previousModel = collection.at(index + 1);
            previousView = this.getItemViewByModel(previousModel);
            previousView.$el.before(itemView.$el);
        }
    }
});