Backbone collection not refreshing after sorting

Question

I'm modifying the https://github.com/davidsulc/marionette-gentle-introduction by adding sorting possibility to the table. Looks like I've done thing i need to make it work, but the table is no being refreshed.

1) the collection: original collection code

Entities.DeviceCollection = Backbone.Collection.extend({
    url: "/devices",
    model: Entities.Device,
    sortAttribute: "type",
    sortDirection: 1,
    sortDevices: function(attr) {
        this.sortAttribute = attr;
        this.sort();
    },
    comparator: function(a, b) {
        var a = a.get(this.sortAttribute),
                b = b.get(this.sortAttribute);

        if (a == b)
            return 0;

        if (this.sortDirection == 1) {
            return a > b ? 1 : -1;
        } else {
            return a < b ? 1 : -1;
        }
    }
});

2) the View: original view code

View.Devices = Marionette.CompositeView.extend({
    tagName: "table",
    className: "table table-hover",
    template: listTpl,
    emptyView: NoDevicesView,
    itemView: View.Device,
    itemViewContainer: "tbody",
    sortUpIcon: 'glyphicon glyphicon-chevron-up',
    sortDnIcon: 'glyphicon glyphicon-chevron-down',
    events: {
        "click th": "headerClick"
    },
    initialize: function() {
        this.listenTo(this.collection, "sort reset", function() {
            console.log("Sort RESET");
            this.appendHtml = function(collectionView, itemView, index) {
                collectionView.$el.append(itemView.el);
            }
        });
    },
    onRender: function() {
        this.$el.find('th div')
                .append($('<span>'))
                .closest('thead')
                .find('span')
                .addClass('sort-ic icon-none')
                .end()
                .find('[column="' + this.collection.sortAttribute + '"] span')
                .removeClass('icon-none').addClass(this.sortUpIcon);
    },
    onCompositeCollectionRendered: function() {
        this.appendHtml = function(collectionView, itemView, index) {
            collectionView.$el.prepend(itemView.el);
        }
    },
    headerClick: function(e) {
        var $el = $(e.currentTarget),
                ns = $el.attr('column'),
                cs = this.collection.sortAttribute;
        console.log('ns:' + ns);

        // Toggle sort if the current column is sorted
        if (ns == cs) {
            this.collection.sortDirection *= -1;
        } else {
            this.collection.sortDirection = 1;
        }

        // Adjust the indicators.  Reset everything to hide the indicator
        $el.closest('thead').find('span').attr('class', 'icon-none');

        // Now show the correct icon on the correct column
        if (this.collection.sortDirection == 1) {
            $el.find('span').removeClass('icon-none').addClass(this.sortUpIcon);
        } else {
            $el.find('span').removeClass('icon-none').addClass(this.sortDnIcon);
        }

        // Now sort the collection
        this.collection.sortDevices(ns);
    }
});

Here I add the listener to sort to refresh the view, but it is not working

initialize: function () {
this.listenTo(this.collection, "sort reset", function() {
    console.log("Sort RESET");
    this.appendHtml = function(collectionView, itemView, index) {
        collectionView.$el.append(itemView.el);
    }
});
},

Where can the problem be?

Answer 1

Just a short version of the other answer by user2814599:

View.Devices = Marionette.CompositeView.extend({
    // Omitted other attributes
    collectionEvents: {
        'sort': 'render'
    }
});

See: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#viewmodelevents-and-viewcollectionevents

Answer 2

All I had to do is to add a listener to the view's initialize method to call this.render() on every sort event like this:

        initialize: function () {
            this.listenTo(this.collection, "sort", function () {
                this.render();

            });
        },