CollectionView: Automatic Rendering not respecting collection sort order about backbone.marionette

[sberryman]

So as of right now I've just decided to overwrite the appendHtml function.

Changed appendHtml to:

appendHtml: function(collectionView, itemView) {
  var itemIndex;
  itemIndex = collectionView.collection.indexOf(itemView.model);
  return collectionView.$el.insertAt(itemIndex, itemView.$el);
}

Then I have added the following to extend jQuery giving me insertAt

(function($) {
  return jQuery.fn.insertAt = function(index, element) {
    var lastIndex;
    if (index <= 0) return this.prepend(element);
    lastIndex = this.children().size();
    if (index >= lastIndex) return this.append(element);
    return $(this.children()[index - 1]).after(element);
  };
})(jQuery);

[mxriverlynn]

Honestly, I've never had to use a sorted collection so I guess I'm not surprised that this doesn't work right now.

It should, though. This is on my list of things to fix for the next release. I'm not sure when I'll have time to get to it, though. If you have a chance to dig in to it at all, I would really appreciate that. :)

[sberryman]

That's what I figured. I'm going to stick with my work around until I can knock a few more items off the to-do list then I'll try and circle back around. I'm pretty sure it works by default in backbone so I'll probably just take a peek at how they implemented it and then send you a pull request based on that.

[tabouassaleh]

In my case, I typically sort collections by reverse chronological order. To do so, I overwrote appendHtml to use $.prepend instead of $.append, told my collection comparator to sort things in reverse, and also listen on the collection's change:timestamp event to trigger a manual sort when and item's timestamp is updated server-side (through Backbone.iosync/iobind).

Having this work correctly without such hacks would be very useful to me.

[mxriverlynn]

@tgcondor how would you make this to work, if you were writing your own views and code?

i'm not sure there's a good way to make this work except for doing exactly what you've described.

the only other way i know of would be to re-render the entire list every time something changes. and that's a bad idea from a performance perspective.

[tabouassaleh]

@derickbailey I probably shouldn't have used the words "without such hacks". What I really meant is to have support for this within Marionette, possibly enabled/disabled with a parameter, so that coders don't have to repeat the pattern. One thought is to given a CollectionView a sort_attribute field, which, when set, would add a comparator to the view's collection if it doesn't already have one and do the other necessary behavioural changes.

But if this is not a common-enough usecase, perhaps it would be sufficient to add to the wiki or readme a "recipe" for others to follow.

[chancancode]

@derickbailey @tgcondor From what I understand, Backbone.Collection only guarantee the integrity of the ordering with respect to model insertion and removal. It does not resort the collection based on the changes in the model attributes... it would be the programmer's responsibility to manually listen to those changes somewhere and call theCollection.sort() manually (which triggers a reset event).

With that in mind, it doesn't seem that difficult to implement this in Marionette's CollectionView.

I think the only addition we need here is to maintain an array of the itemViews we have inserted into the DOM. On every add event, the collection will also pass along the index (via options.index). As long as we respect this and insert the itemView in the correct position in the DOM (something like itemViews[options.index-1].$el.after( ... )), everything else should just work automatically^ assuming we keep the itemViews array in sync with the collection.

^ This probably won't work if you are doing anything fancy like overriding appendHtml

[samccone]

merged into v2.0 with #1161