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>
    

assets folder not reachable in cordova / ember.js project

i am developing an app for my windows phone 10, using ember.js and cordova. Why am I unable to display images - always getting the following error:

The app couldn’t resolve ms-appx://io.cordova.myappXXXX/assets/images/myImage.png because of this error: DATA_NOT_AVAILABLE.

My workflow:

1. creating ember.js app

2. folder for images:

   myEmberProject/public/assets/images/myImage.png

3. Image-HTML tag within a template:

   < img src="assets/images/myImage.png" alt="Image not available"/>

   // = ''

4. Running this app in a browser (firefox, chrome etc.) works great for me, so next step...

5. run 'ember build'

6. copy all folders/files from

   dist/

   to

   myCordovaProjekt/www/

7. Debug / Run Cordova directly to my windows phone

8. App is opening, js and css files are ok, but i get no image, only the alternative text

   Image not available

What am I doing wrong?

Thank you for helping me!

How to use mixin inside custom helper?

I have defined some helper functions inside a mixin; however, I am not sure how to uses these functions inside a custom helper.

I have referred to question below but seems ember no longer have Mixin.apply method.

Accessing an Ember.Mixin within a custom handlebars helper

Menu list not showing in Safari/iOS

I have a menu which is working perfectly in Chrome on Mac and Chrome on Android. But it doesn't work with Safari on Mac and Chrome/Safari on iOS.

The menu items is correctly showed in source code and I can see the elements correctly placed if I hover the code in a browser inspector. The problem is that they are not actually showed in the browsers. It is like they are laying under det rest of the elements. I have tried with z-index without any luck.

Any help is appriciated.

Ember

<div class="goodie-pack-menu">
  <button class="goodie-pack-menu-toggle" >
    <i class="fa fa-bars"></i>
  </button>
  <ul class="goodie-pack-menu-list ">
    <li class="goodie-pack-menu-item" ></li>
    
      <li class="goodie-pack-menu-item" >
        
      </li>
    
  </ul>
</div>

CSS

.goodie-pack-menu
  width: 100%
  height: 100%

  &-toggle
    width: 100%
    height: 100%
    background: white
    border: none
    display: block
    z-index: 200000

  &-list
    position: fixed
    width: 100%
    margin: 0
    padding: 0
    left: 0
    list-style: none
    background: #f9f9f9
    display: none    

    &--open
      display: block

  &-item
    padding: 20px 0
    text-align: center
    pointer-events: all

how to serialize nested object without creating a serializer for the model in ember

I know that if I want to serialize nested comments of a model called post, I need to create a serializer in app/serializer/post.js something like :

import RESTSerializer from 'ember-data/serializers/rest';
import DS from 'ember-data';

export default RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
  attrs: {
      comments: {embedded: 'always'}
  }
});

but what if I want to serialize this inside the app/serlizer/application.js ? I dont want to define a serializer for each model. Instead I want to be able to resolve the belong-to or has-many relationship inside the normalizeQueryResponse for example.

normalizeQueryResponse(store, primaryModelClass, payload, id, requestType) {
    console.log(payload);
    return this._normalizeResponse(store, primaryModelClass, payload, id, requestType, true);
  },

I want to be able to go thorough the payload and if a property in payload turned out to be object then resolve that.

does anyone know if that is possible?

Ember-Data: InnerObject has EmptyObjects - whats not true

Recently, I started to learn Ember-data and I'm writting an application with very custom API. Response from Back-end is in bad format, so i normalize it to JsonApi via method 'normalizeResponse' and everything works good.

The problem appears in moment when I want to see content from response. When I was reading about Ember-data, I learned that if got data (InnerObjects), I will be able to take property from it via. InnerObject.get('some_property'), but it doesnt work for me. If I want 'some_property' I have to write InnerObject.data.someproperty what looks bad in longer path. I used Ember.debug() to see this path and my browser shows me that property '_data' is EmptyObject what is not true. When i click on it, it shows a list of properly content ( look attachment ). Am I doing something wrong ? Am I forget about something or misunderstood Ember-Data? I will be grateful for any help.

code browser

How to observe the value in Ember

I am trying to make my first Ember application and I am struggling with Ember.set() error.

My nextMonth function is working fine and rendering fine but if I add to my view I get an error.

View:

<h2></h2>
<button >Next</button>

Controller:

import Ember from 'ember';

export default Ember.Controller.extend({

month: new Date().getMonth() + 1,
year: new Date().getFullYear(),

getDays: function(year, month){
  const date = new Date(year, month, 0).getDate();
  this.set('days', date);
},

init: function() {
 this.getDays(this.month, this.year);
},

actions:{
  nextMonth: function(){
    if(this.month !== 12){
      this.set('month', this.month++);
    }
    else if(this.month === 12){
      this.set('month', 1);
      this.set('year', this.year++);
    }
    this.getDays(this.year, this.month);
 }
}
});