0

I've spent the last three days trying to figure this out and i hope someone from here could help.

Note regarding setup: I'm working off Ember-Cli therefore my Ember version 1.13.7 and Ember-Data 1.13.8

To learn more about how emberJS works i decided to create a simple blog system that i will use on my own website. The data is loaded from a Firebase database using the Emberfire plugin.

Help: I cannot sort the data i retrieve into a descending order. For example, if i have 5 posts created on Monday, Tues, Wednesday, Thursday and Friday. Each with a unique timestamp in numerical order.

When i retrieve data it shows in this order:

1st ever post (oldest)
2nd ever post
3rd ever post
4th ever post
5th ever post (newest)

i want to reverse the order so my latest blog post appears on top.

I am retrieving data with the following code:

return this.store.find('post');

I can't work out how to use: sortBy which is from Ember itself or the orderBy() which is from firebase/emberfire?

I understand it needs to be inside a controller which will modify the data from the model before presenting it in the view. But can anyone help?

heres some more code:

Attempt at a controller - it doesn't work:

import Ember from 'ember';

 export default Ember.ArrayController.extend({
    sortedModel : function(){
        return this.get('model').sortBy();
    }.property('@each')
});

View Template:

{{#each sortedModel as |post|}}
    {{#blog-post post=post}}{{/blog-post}}
{{/each}}

{{outlet}}
Molik Miah
  • 132
  • 7

2 Answers2

3

You need a property to order your posts by. Luckily, Firebase automatically provides such a property. Every item saved to Firebase is automatically given a timestamp at that moment.

In your post model, add a timestamp property like this:

//models/post

export default DS.Model.extend({
  //
  timestamp: DS.attr('number')
  //
});

Now in your controller you can sort by it. You don't need the @each helper because sortBy already works on arrays.

//controllers/posts

import Ember from 'ember';

 export default Ember.ArrayController.extend({
    sortedModel : function(){
        return this.get('model').sortBy('timestamps').reverse();
    }
});

I think that should work, but let me know in the comments if you have any trouble!

NicholasJohn16
  • 2,390
  • 2
  • 21
  • 45
  • Each record has its identifier- an id. Identifiers get incremented so these kinda reflect the timestamp as well. – kristjan reinhold Oct 28 '15 at 07:28
  • 1
    While kinda based on the timestamp value, it's really not great for sorting https://www.firebase.com/blog/2015-02-11-firebase-unique-identifiers.html – NicholasJohn16 Oct 28 '15 at 08:57
  • I couldn't get this to work. I must have gone wrong somewhere along the line of coding. with a model my data displays oldest post at the top and newest post at the bottom. Thank you very much for the tips/advice, I'm afraid I may need to start the project from scratch because in theory the code you told me SHOULD work. – Molik Miah Oct 28 '15 at 17:39
  • try add `reverse` after `sortBy`. – NicholasJohn16 Oct 28 '15 at 22:03
1

Since you said your post array is already ordered but the wrong way. You could use Array.prototype.reverse();

export default Ember.ArrayController.extend // Array and object c are deprecated.

export default Ember.Controller.extend({
    sortedModel : function() {
        return this.get('model').reverse(); 
    }).property('model')

NB: If this does not work for you (your problem is bigger, but not explained here). I think you should handle the pagination logics in backend.

Instead of this.store.find('post'); you should be using

this.store.find('post', { page: variable });
kristjan reinhold
  • 2,038
  • 1
  • 17
  • 34
  • I can't seem to get it to work, I think I must have gone wrong with the coding somewhere. If I do not use a model at all, my Posts all show in the order of first created to last created. I can't seem to find a method of reversing it. But thank you very much for your tips and advice – Molik Miah Oct 28 '15 at 17:36
  • I can't seem to find a method of reversing it.< you must be blind. – kristjan reinhold Oct 29 '15 at 09:48
  • I have done exactly what you suggested Kristjan but its not making a change. It must be how I've organised the models/routers?? I will go back to basics again. Sorry about that – Molik Miah Oct 29 '15 at 17:09
  • How about u add some traceback? Just by saying "it does not work" is hard to debug. – kristjan reinhold Oct 29 '15 at 18:47
  • Sorry i haven't been great with the responses as i'm new to this framework and don't have extensive experience with javascript. I have managed to work around this. As i am using Firebase for my database i can use the Emberfire plug in. To get data i can use this.store.find('posts'), this gets data in ascending order. i can alter it with this.store.find('posts', { orderBy: 'timestamp'}); and then in my model when i store the timestamp i simply make it a negative number using something: timestamp: new Date() * -1 and it works! – Molik Miah Oct 31 '15 at 01:10
  • @Molik I'm glad to hear that it worked out for you, but really the solution you provided is just temporary as your post counts go over 20. It's not really smart to load them all at once. I think firebase has some default pagination built in otheriwise this service wouldnt be costing so much =) E.g this.store.find('post', { page: variable }); – kristjan reinhold Oct 31 '15 at 06:30
  • Thank you, I am just learning EmberJS at the moment. I have definitely taken note of what you've said and i'll practice loading only the required data to keep bandwidth down. Thanks again – Molik Miah Nov 02 '15 at 12:50