I am having some trouble accessing my route's model inside my template. My model is created successfully as part of an action defined in my home controller:
actions: {
createProject: function () {
var project = this.store.createRecord('project', {
name: 'Sample name'
});
var self = this;
var promise = project.save();
promise.then(function (response) {
self.transitionToRoute('estimate', project);
});
promise.catch(function (errors) {
console.log(errors);
});
}
}
The model's uuid is correctly serialized into the URL, with the URL inside my router.js being as follows:
this.route('estimate');
this.route('estimate', { path: '/estimate/:project_id' });
My estimate controller also correctly specifies the project dependency:
import Ember from 'ember';
export default Ember.Controller.extend({
needs: ['project']
});
...and I define the model inside my routes/estimate.js as follows:
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
// model: function(params) {
// return this.store.find('project', params.project_id);
// },
model(params) {
return this.store.findRecord('project', params.project_id);
}
});
Logging the output of this.store.findRecord('project', params.project_id) I get:
Class {__ember1458995391969: null, __ember_meta__: Meta}
__ember1458995391969
...
However when I try to access the project model inside my estimate handlebars template (using {{model.project.name}}), I get nothing (no errors, no output).
Anybody have any thoughts on this?
The return value of the model hook is bound to the model property of the controller, which binds into the template under the same name.
You should write {{model.name}}, not {{model.project.name}}.
Your model hook is returning an Ember Data promise object directly (which is normal). This means that model refers to your project object; there is no model.project property.
Rendering {{model.project.name}} is like calling this.get('model.project.name') in your controller. Ember will return undefined for this path, even if model.project is undefined itself:
> $E.get('model')
< Class {store: Class, isLoaded: true, manager: Class, isUpdating: false, __ember1459002119210: "ember610"…}
> $E.get('model.project')
< undefined
> $E.get('model.project.name')
< undefined
> $E.get('model.project.name.whatever')
< undefined
So there's no error in this case. And nothing shows up in the template, because null and undefined are rendered as blank strings.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments