CODEWITHSUNDEEP
javascriptbackbone.js
Phortuin
Phortuin

Reputation: 770

Collection sorting with comparator only works after fetch is complete?

I have a simple collection of messages that I want to reverse sort on time (newest on top), using comparator:

...
this.comparator = function(message) {
    var time = new Date(message.get("time")).getTime();
    return time;
}
...

In my view, I use fetch and add event:

messages = new MessageCollection();
messages.fetch({update: true});
messages.on("add", this.appendMessage);

...

appendMessage: function(message) {
    var messageView = new MessageView({
        model: message
    });
    this.$el.prepend(messageView.render().el);
}

Sadly, the messages are not rendered in the order I am looking for, but in the original order they were in coming from the server.

Now, after some testing I found out that when I add all the messages at once (using reset), the order is as I expected. 

messages.fetch();
messages.on("reset", this.appendCollection);

...

appendCollection: function(messages) {
    messages.each(function(message) {
        this.appendMessage(message);
    }, this);
}

Even though I can understand this process since a collection probably can only figure out how it's supposed to be sorted after all models are added, this (the on("add") configuration) used to work in Backbone 0.9.2.

Am I missing something? Did the comparator method change, or the event model in regard to add? Or am I going at it the wrong way? Thanks!

Upvotes: 0

Views: 457

Answers (2)

neeebzz
neeebzz

Reputation: 11538

You call appendMessage method when you add a model in collection. the appendMessage is being called in the order of adding models and not the actual order in the collection.

Upvotes: 1

Tallmaris
Tallmaris

Reputation: 7590

In the "add" case, the model is inserted in the right position in the collection, as it should be by "comparator" documentation). But then you are doing 

this.$el.prepend(messageView.render().el);

which will put the html from the MessageView rendering at the top of the $el (which I assume is the CollectionView container).

The best way to also keep the Html respecting the sorted order would be to re-render the collection view, or scroll the collection view children and insert the added messageView at the right place (a bit more difficult to do).

Upvotes: 1

Related Questions