How to resolve one attribute (hasMany) from queryParam in ember?

I'm trying to resolve one attribute that I'm passing within transitionTo(), but it always return as a string <(subclass of Ember.ArrayProxy)%3Aember334>, so I cannot resolve this "ArrayProxy". If I print the attribute before the transitionTo() the value is there, but for some reason it converts to an "ArrayProxy" and not the value I'm setting before...

The way I'm doing now is setting an attribute in my model and getting it back which is FINE.

What I want is to return in the URL the projects and pages the user is filtering and get the parameters from there

Here is my action:

actions: {
        changePage(route, queryParams, page) {
            console.log(this.getQueryParams(queryParams, page));
            this.get('router').transitionTo(route, { queryParams: this.getQueryParams(queryParams, page)});
            // this.get('router').transitionTo(route, { queryParams: { page: 3, projects: ["162"]}});
            // EVEN PLACING THE VALUE STATICALLY DOES NOT WORK
        }
    }

In my Route I have this:

export default Ember.Route.extend({
    queryParams: {
        page: {
            refreshModel: true
        },
        projects: {
            refreshModel: true
        },
    },
    beforeModel: function(transition) {
        // I THINK I NEED TO DO SOMETHING HERE
    },
    model(params) {
        // params returns strings 
        // params.page returns the page correctly
        // params.projects  but it returns that "ArrayProxy"

        // THIS IS HOW I'M DOING. 
        // I dont think this is the best way of doing and that's why I'm asking for help. 
        // I think there must be a way to change the URL and the get parameters there! 
        let query_params = this.get('modelQueryParams'); // modelQueryParams is setted in the filter action...


        return Ember.RSVP.hash({
            inventoryProject: this.get('store').findAll('inventoryProject'),
            inventorySummary: this.get('store').query('inventorySummary', query_params),
    });

This is the result of the URL:

http://localhost:4200/?page=3&projects=%3C(subclass%20of%20Ember.ArrayProxy)%3Aember334%3E

This is how it should be:

http://localhost:4200/?page=2&projects%5E%5D=162

Observing ember store from component

Warning contains legacy code

I have a component that receives a model containing the majority of the data that belongs to it. However, the component has a component within it that is using global settings from the store to display data.

A user request has been made so that if changes are made to the model then it also updates the global settings store, which then updates the internal component.

I have updated ember so that it updates the store, but how can I put an observer on the store for the internal component?

I have tried the following for the internal component, but it never makes it to the observer function:

export default Ember.Component.extend({
  store: Ember.inject.service(),
  globals: Ember.computed('store', function() {
    return this.get('store').peekRecord('globals', 0);
  }),
  globalObserver: Ember.observer('globals', function() {
    console.log("Hello World");
  }
});

Is there any way to do this?

Is there a way to set an observer on any ember model change in ember store?

First of all, I am using ember 2. I am requesting the back-end and it returns some data. Then, I pushed these data to a model in ember store. The issue that I want to do some action when this model is updated. So, Is there a way to observe the model in the store? Thank you in advance.

Ember async hasMany sorting undefined properties

I'm using Ember v2.8 with firebase, and am having trouble with async loading of a hasMany relationship.

Model1

export default DS.Model.extend({
  model2s: DS.hasMany('model2'),
  sort: [ 'property1:asc', 'property2:asc' ],
  sortedModel2s: Ember.computed.sort('model2s', 'sort'),
  reducer(result, model2) {
    // Would do something interesting, but
    // model2.get('property1') === undefined :(
  },
  somethingInteresting: Ember.computed('sortedModel2s.@each', function() {
    return this.get('sortedModels2').reduce(this.reducer, 1);
  })
})

I would expect somethingInteresting to get computed when there is actually data in the sorted model, but instead it gets an array with the right number of objects, but each with empty properties. The only property on each model2 is id. It then will fetch all the model2s and compute again every time (this is really expensive with hundreds of models).

The workaround I'm using is this, but it feels like the wrong way to go about it, especially since it wouldn't really update with changes:

realSortedModel2s: Ember.computed(function() {
  this.get('model2s').then(models => this.set('realSortedModel2s', models));
  return [];
});

I'd much rather have sortedModel2s return a promise if it's just going to be filled with empty values, and then I can have somethingInteresting calculate using the promise, but maybe I'm understanding the situtation incorrectly.

Optional belongsTo relationship not pushed to store

I'm having a problem where an optional belongsTo relationship isn't properly pushed to store. In my Ember application I have a relationship between 2 models that is optional. For example imagine:

App.User = DS.Model.extend({
  profile: DS.hasMany('profile', {'async': true})
});

App.Profile = DS.Model.extend({
  user: DS.belongsTo('user', {'async': true})
});

where the "user" field in the "Profile" model can be empty. When it is empty, the serializer should return

....
relationships: {
  user: null
}
...

in the normalized payload, at least if I have interpreted the JSON-API standard (JSON-API resource linkage) correctly. The problem is that this doesn't seem to be pushed to the store. I can reproduce this problem by

1. Loading a "Profile" record from backend with relationship "user" set to null
2. Changing the "user" value on the client side for that particular record to a non-null value
3. Reloading the record from the backend

After these steps the "user" field on the "Profile" record still maintains its faulty, non-null value.

Is this expected behaviour or a bug? If this is expected behaviour, how should I track these changes in order to maintain data integrity?

What are Controllers & Components in EmberJS?

What are Controllers & Components in EmberJS

ember data-binding from parent to child

i have just started learning ember 1 week ago, and i'm little confused about data-biding :

• i have index controller that have a foor property,
• test-component that have a its bar property comming from the index controller foo property

---

index

index.hbs // template

parent value  : 

index.js // controller

import Ember from 'ember';

export default Ember.Controller.extend({
  foo: "",
});

test-component // template

child value 

test-component // component

import Ember from 'ember';

let TestComponent = Ember.Component.extend({
});

TestComponent.reopenClass({
  positionalParams: ['bar'],
});

export default TestComponent;

---

what confuse is :

1. if write the component in my index template as , i get only one-way data-binding, that mean if i change the bar property in the component, the foo property don't change.

2. if i use a inside my component, i can see that both bar and foo get updated, so bar is binded to both foo and input value component ?? how its is working(PS : as i said in question 1, foo get updated only if i write in my index template

and thanks everyone.