mercredi 15 mars 2017

dynamic sorting in ember displays different results everytime

Well, I have a user that has many notifications. This notifications have a sentDate attribute that I want to group by that sent date in order to display the date and then then content.

In my controller I'm trying to do this sorting. The issue is whenever I update the user or reload the page only few notifications are being displayed, or none of them even if they're loaded in the application when I check on the Ember Inspector Chrome Extension. I'm also printing the all of the notifications and printing them one by one on the console and they seem to have data, but when I debug the code some 'items' are null.

Can you see the error??? Is there another easier approach??

//controllers/home-page/user-notifications.js

import Ember from 'ember';

export default Ember.Controller.extend({
  groupedResults: function () {
    var result = [];
    console.log(this.get('model.notifications'));
    this.get('model.notifications').forEach(function(item) {
        console.log(item);
        if(item.get('sentDate')){
            var itemDate= (new Date(item.get('sentDate'))).toLocaleDateString();
            var hasDate = result.findBy('sentDate', itemDate);

            if(!hasDate) {
                result.pushObject(Ember.Object.create({
                    sentDate: itemDate,
                    contents: []
                }));
            }

            result.findBy('sentDate', itemDate).get('contents').pushObject(item);
        }
    });

   return result;
  }.property('model.notifications')
});

//templates/home-page/user-notifications.hbs

    <table class="table text-centered">
    <tbody>
        
            <tr>
                <td colspan="2" class="none-border"><strong></strong></td>
            </tr>
            
                <tr>
                    <td class="tr-panel-user" >
                        <img src="" height="40" width="40">                      
                    </td>
                    <td class="tr-panel-user" >
                        
                        <p class="gray-font"></p>
                    </td>
                </tr>
          
                                   
        </tbody>
    </table>

    <center></center>
    





Aucun commentaire:

Enregistrer un commentaire