Marionette CompositeView Sort Rendering

Question

I have a Marionette (2.4.1) CompositeView and when I do a sort it re-renders the entire view rather than the childView. The header icons revert back. I could fix them on render but is there a way that I can just render the childView?

diaryEntries = Backbone.Marionette.CompositeView.extend({
  template  : diaryEntries,
  className: 'diary-entries',
  collection: new Diary(),
  childViewContainer: 'tbody',
  reorderOnSort: true,

  events: {
    'click th[data-sort]': 'sort',
    'click .pagination a': 'paginate'
  },

  initialize: function() {
    this.itemsPerPage = 5;
    this.currentPage = 1;
    this.pages;
  },

  ...

  sort: function(e) {
    var $th, dir, sort, sorted;
    e.preventDefault();
    $th = $(e.currentTarget);
    sort = $th.data('sort');

    if (sort === this.collection.sortField) {
      this.collection.sortDirection *= -1;
    } else {
      this.collection.sortDirection = 1;
    }

    this.collection.sortField = sort;

    $('span.glyphicon').removeClass('active-sort');
    $th.siblings('th').find('span.glyphicon').removeClass('glyphicon-chevron-down glyphicon-chevron-up').addClass('glyphicon-sort');

    if (this.collection.sortDirection === 1) {
      $th.find('span.glyphicon').removeClass('glyphicon-chevron-down glyphicon-sort').addClass('glyphicon-chevron-up active-sort');
    } else {
      $th.find('span.glyphicon').removeClass('glyphicon-chevron-up glyphicon-sort').addClass('glyphicon-chevron-down active-sort');
    }

    this.collection.sort();
  },
...

});

seebiscuit · Accepted Answer · 2015-06-07T18:16:52.437

Well, looks like Marionette was concerned about the same thing you are. I couldn't find this in the docs, but it's pretty plain in the source. If you pass this option:

reorderOnSort: true

into your Collection/Composite view, on a 'sort' event the Collection/View will not re render, just its children.

See this line in the Marionette source: https://github.com/marionettejs/backbone.marionette/blob/v2.4.1/src/collection-view.js#L166

UPDATE If you're filtering your children views, running sort on your collection will invoke render on the Collection/CompositeView. The logic is that if you're paginating your children results, then you must sort the original, unfiltered, collection to properly display paginated results.

Nonetheless, I don't see anything intrinsically wrong with paginating a filtered set.

Fortunately, its easy to override the sort method to render whether your results are filtered or not. On you Collection/CompositeView include this method:

reorder: function() {
   var children = this.children;
   var models = this._filteredSortedModels();

   // get the DOM nodes in the same order as the models
   var els = _.map(models, function(model) {
     return children.findByModel(model).el;
   });

   this.triggerMethod('before:reorder');
   this._appendReorderedChildren(els);
   this.triggerMethod('reorder');
   }
},

You'd have to overwrite `CollectionView.reorder`. Would you like me to include that in my answer? — seebiscuit, Jun 07 '15 at 16:36
It probably would be good since some people may not read the comments. Thanks for your help. — jabbermonkey, Jun 07 '15 at 17:58
Ok, see the update. Just curious, how are you sorting your filtered collection without re rendering the CompositeView? Are you removing the filter before sorting and then re-filtering? — seebiscuit, Jun 07 '15 at 18:18

Marionette CompositeView Sort Rendering

1 Answers1