javascriptnpmember.jsember-data

EmberJS model from route returns undefined in controller


Can some one help me on the below doubt?

I am using EmberJS 3.4 version and I have a route which looks like

export default Route.extend({
model(){
    const items = [{price: 10}, {price: 15}]
    return items
 },
});

and a controller which returns undefined for model

export default Controller.extend({

    init(){
        console.log(this.model); //returns undefined
        console.log(this); //has the model object as a property
    },
  })

see this image which contains output: see this image which contains output

For some reason, this.model returns undefined but when I log "this", it has the model object as the property listed.

My question is, when I access model within a computed property why the property isn't undefined ?

export default Controller.extend({

subtotal: computed('this.model', function(){
     return  this.model.reduce((acc, item) => {
         return acc + item.price
     },0) // return 25
    }),
 })

Solution

  • Controllers are singletons, so you can't access the model in init.

    when I access model within a computed property why the property isn't undefined ?

    Accessing in computed properties (and in more modern ember, native getters) is the only way to have a reactive access to the model property. This "reactiveness" keeps all your data in sync -- and in ember 3.4, computeds' callbacks are not invoked until the dependencies are also resolved).

    More information

    For some reason, this.model returns undefined but when I log "this", it has the model object as the property listed.

    this happens because you log an object, and objects in the console are not copied to the console, the reference is rendered, so if you're not fast enough, the data will all be resolved / settled by the time you view it.