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:
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
}),
})
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.