问题
I'm trying to learn ember but having a hard time finding out why my data from the backend is not showing up. I'm using Ember Data with mirage fixtures. The data is showing up. Only if I introduce simple relationships the data from those relationships is not showing up in my app. Is there a general way how to debug when you just get <!----> in your ember app?
mirage/fixtures/contacts.js
export default [
{
id: 1,
userName: "Barack Obama",
profilePictureUrl: "/img/profilepics/barack.png",
conversation: 1
},
];
mirage/fixtures/conversations.js
export default [
{
id: 1,
contact: 1,
lastConversationTime: 'Sun Jun 07 2015 14:05:50 GMT+0200 (CEST)',
},
];
mirage/config.js
export default function() {
this.get('/api/conversations');
this.get('/api/conversations/:id');
this.get('/api/contacts');
this.get('/api/contacts/:id');
}
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
this.route('contacts');
this.route('conversations');
});
App.ContactsRoute = Ember.Route.extend({
model: function() {
return this.store.find('contact');
}
});
App.ConversationsRoute = Ember.Route.extend({
model: function() {
return this.store.find('conversation');
}
});
App.ContactModel = DS.Model.extend({
userName: DS.attr('string'),
profilePictureUrl: DS.attr('string'),
conversation: DS.belongsTo('conversation'),
});
App.ConversationModel = DS.Model.extend({
lastConversationTime: DS.attr('date'),
contact: DS.belongsTo('contact')
});
$.mockjax({
url: "/contacts",
type: "GET",
status: 200,
statusText: "OK",
responseText: {
contacts: [{
id: 1,
userName: "Barack Obama",
profilePictureUrl:"/img/profilepics/barack.png",
conversation: 1
}]
}
});
$.mockjax({
url: "/conversations",
type: "GET",
status: 200,
statusText: "OK",
responseText: {
conversations: [{
id: 1,
contact: 1,
lastConversationTime: 'Sun Jun 07 2015 14:05:50'
}]
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.11.1/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.11.1/ember.debug.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.16.1/ember-data.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{link-to 'contacts' 'contacts'}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="contacts">
<ul>
{{#each model as |contact|}}
<li>{{contact.userName}}</li>
<li>{{conversation.lastConversationTime}}</li>
{{/each}}
</ul>
</script>
</body>
</html>Ember: 1.12.1 Ember Data: 1.0.0-beta.19 jQuery: 1.11.3
This is a JSBin that reproduces the issue: http://emberjs.jsbin.com/deledemaya/1/edit?html,js,output
回答1:
Looking at the JSBin example.
You've got a number of issues in your code.
First of all, in your template you're accessing the conversation model like this:
<ul>
{{#each model as |contact|}}
<li>{{contact.userName}}</li>
<li>{{conversation.lastConversationTime}}</li>
{{/each}}
</ul>
conversation is not defined anywhere. As conversation is a relationship on contact, you should access it via contact like this:
<li>{{contact.conversation.lastConversationTime}}</li>
Note that you don't need a conversation route defined in order to access conversation via contact in the contact route.
Then, the convention is to name models as App.Foo and not App.FooModel. This info is useful only in JSBins, as modern Ember apps do not use globals (App).
Finally, your main mistake is that you defined your relationship as synchronous. Sync relationships assume that all requested related records are already available in the store. To achieve that, you have to sideload your related data like this:
$.mockjax({
url: "/contacts",
type: "GET",
status: 200,
statusText: "OK",
responseText: {
contacts: [{
id: 1,
userName: "Barack Obama",
profilePictureUrl:"/img/profilepics/barack.png",
conversation: 1
}],
conversations: [{
id: 1,
contact: 1,
lastConversationTime: 'Sun Jun 07 2015 14:05:50'
}]
}
});
Demo: http://emberjs.jsbin.com/taboge/1/edit?html,js,output
Alternatively, you can define your relationship as async. This will tell Ember to retrieve records from the backend whenever it stumbles upon a missing relationship.
Example:
App.Contact = DS.Model.extend({
userName: DS.attr('string'),
profilePictureUrl: DS.attr('string'),
conversation: DS.belongsTo('conversation', {async: true}),
});
$.mockjax({
url: "/contacts",
type: "GET",
status: 200,
statusText: "OK",
responseText: {
contacts: [{
id: 1,
userName: "Barack Obama",
profilePictureUrl:"/img/profilepics/barack.png",
conversation: 1
}]
}
});
$.mockjax({
url: "/conversations/1",
type: "GET",
status: 200,
statusText: "OK",
responseText: {
conversation: {
id: 1,
contact: 1,
lastConversationTime: 'Sun Jun 07 2015 14:05:50'
}
}
});
Demo: http://emberjs.jsbin.com/qejayi/1/edit?html,js,output
Async relationships force you to work with them via promises.
Also note that you don't have to define both directions of the relationship as async. In fact, you don't need the reverse relationship at all! You only need the reverse relationship if you want to obtain users for a given conversation.
And be warned that currently Ember is very eager on requesting asynchronously related records. If you only ask for an id of a related record, Ember will retrieve the whole record, even though wasn't necessary: the id was already known. I hope to see this problem resolved in one of upcoming Ember Data releases.
来源：https://stackoverflow.com/questions/30693925/where-did-my-data-get-stuck-in-ember