I have the following two models:
models/profile.js
import DS from 'ember-data';
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string')
});
models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
profile: DS.belongsTo('profile', {async:true})
});
The user models is loaded by a user service, based on a cookie set by the server when the user authenticates:
services/user.js
import Ember from 'ember';
export default Ember.Service.extend({
store: Ember.inject.service('store'),
init: function() {
var _this = this;
_this.set('user', null)
if(Cookies.get('uid')) {
_this.get('store').findRecord('user', Cookies.get('uid')).then(function(user) {
console.log(user)
_this.set('user', user)
}, function(err) {
console.warn(err);
Cookies.remove('uid')
_this.set('user', null)
});
} else {
_this.set('user', null)
}
}
});
The user service is injected into the application controller:
controllers/applications.js
import Ember from 'ember';
export default Ember.Controller.extend({
user: Ember.inject.service('user')
});
I have some debugging output in my main template
templates/application.hbs
{{#if user.user}}
<h2 id="title">Welcome to Ember {{user.user}} # {{user.user.id}} # {{user.user.profile}} # {{user.user.profile.firstName}}</h2>
{{else}}
<h2 id="title">Please Log In <a href="/auth/linkedin">Linkedin</a></h2>
{{/if}}
{{outlet}}
which when I authenticate and load the page outputs
Welcome to Ember <project@model:user::ember418:5663bfe19d78ce048784a098> # 5663bfe19d78ce048784a098 # <DS.PromiseObject:ember419> #
I can see requests made to my api endpoints in the console, first for the user then for the profile, as expected:
http://localhost:3000/api/users/5663bfe19d78ce048784a098
{
links: {
self: "http://localhost:3000/api/users/5663bfe19d78ce048784a098"
},
data: {
id: "5663bfe19d78ce048784a098",
type: "users",
attributes: {
providers: [{
provider: "linkedin",
id: "ECixxxxqc9",
displayName: "John Smith",
name: {
familyName: "Smith",
givenName: "John"
}
}]
},
links: {
self: "/users/5663bfe19d78ce048784a098"
},
relationships: {
profile: {
data: {
type: "profiles",
id: "5663c05f5fd3331387307e89"
}
}
}
}
}
http://localhost:3000/api/profiles/5663c05f5fd3331387307e89
{
links: {
self: "http://localhost:3000/api/profiles/5663c05f5fd3331387307e89"
},
data: {
id: "5663c05f5fd3331387307e89",
type: "profiles",
attributes: {
active: true,
yearsExperience: 9,
lastName: "Smith",
firstName: "John"
},
links: {
self: "/profiles/5663c05f5fd3331387307e89"
}
}
}
It seems like the user.user.profile
promise isn't being resolved, hence the <DS.PromiseObject:ember419>
output and no value for user.user.profile.firstName
. Is there something I'm missing in the model definitions or is there something I need to call to manually tell the controller/template that a belongsTo has been resolved?
Aucun commentaire:
Enregistrer un commentaire