All Case Studies Design Development Interviews Our Way Project Management

New Elements In Array Are Shown At The Bottom And Go To The Top After Short Delay

Let's say you have an example list of ordered notes.
Model:
sortCreatedAtDesc: ['createdAt:desc'],
notesSorted: Ember.computed.sort('notes', 'sortCreatedAtDesc')

And they are displayed in the view like this:

[code]

 

Problem

After adding new note to collection it appears on the bottom of the page and than, after short delay, moves to the top (where it should appear in the first place because it is the newest one).

How to make it appear on the top immediately?
 

Solution

Apparently it happened because new note was shown before getting information back from the server. CreatedAt property is set on the backend, so during short time when waiting for backend response it has the value of null and is placed on the bottom of the page.

Solution to this is to sort only saved notes, ommiting those with isNew property.

In model:

sortCreatedAtDesc: ['createdAt:desc'],
notesSaved: Ember.computed.filterBy('notes', 'isNew', false),
notesSorted: Ember.computed.sort('notesSaved', 'sortCreatedAtDesc'),

Keep in mind that there will be a short delay between clicking "Save" and displaying new note on the list because of it, so you should consider making UI changes accordingly. For example, you may disable "Save" button or display "Note is saving..." message to the user.

 

Here's an example use of isSaving in save action:

saveNote: function() {
this.set('isSaving', true);
//...
note.save().then(() => {
this.set('isSaving', false);
}
 this.set("noteBody", "");
}
Follow Netguru
Join our Newsletter

READ ALSO FROM Ember.js
Read also
Need a successful project?
Estimate project or contact us