我的数据在哪里停留在Ember？ <！----> [英] Where did my data get stuck in Ember? <!---->
问题描述
我正在尝试学习ember，但很难找出为什么我的后台数据没有出现。我正在使用Ember Data with mirage fixtures。数据显示。只有我介绍简单的关系，这些关系中的数据才会在我的应用程序中显示出来。在您的ember应用程序中您刚刚获得<！----> 时，是否有一般的方法？
mirage / fixtures / contacts.js
export default [
{
id：1 ，
userName：Barack Obama，
profilePictureUrl：/img/profilepics/barack.png，
对话：1
}，
];
幻灯片/ fixtures / conversations.js
导出默认值[
{
id：1，
联系人：1，
lastConversationTime：'Sun Jun 07 2015 14:05:50 GMT + 0200（CEST）'，
}，
];
幻影/ config.js
导出默认功能（）{
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（）{//将你的路由放在这里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 '）;}}）; App.ContactModel = DS.Model.extend（{userName：DS.attr（'string'），profilePictureUrl：DS.attr（'string'），对话：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： Barrett Obama，profilePictureUrl：/ img / profilepics / barack.png，conversation：1}]}}）; $。mockjax（{url：/ conversations，type：GET，status：200，statusText： OK，responseText：{对话：[{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 =stylesheethref =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>欢迎使用Ember.js< / h2> {{link-to'contacts''contacts'}} {{outlet}}< / script> < script type =text / x-handlebarsdata-template-name =contacts> < UL> {{#each model as | contact |}}< li> {{contact.userName}}< / li> <李> {{conversation.lastConversationTime}}< /锂> {{/ each}}< / ul> < / script>< / body>< / html>
Ember：1.12.1
Ember数据：1.0.0-beta.19
jQuery：1.11.3
这是一个JSBin重现问题：
http://emberjs.jsbin.com / deledemaya / 1 / edit？html，js，output
查看JSBin示例。 >
您的代码中有一些问题。
首先，在您正在访问的模板中对话模型如下：
< ul>
{{#each model as | contact |}}
< li> {{contact.userName}}< / li>
< li> {{conversation.lastConversationTime}}< / li>
{{/ each}}
< / ul>
对话没有在任何地方定义。因为对话是联系人之间的关系，您应该通过联系人这样：
< li> {{contact.conversation.lastConversationTime}}< / li>
请注意，您不需要对话路线定义，以通过联系人路线中的联系人访问对话。
然后，约定是命名模型为 App.Foo 而不是 App.FooModel 。此信息仅在JSBins中有用，因为现代Ember应用程序不使用全局变量（ App ）。
最后，您的主要错误是您将您的关系定义为同步。同步关系假设所有请求的相关记录已经在商店中可用。要实现这一点，你必须加载你的相关数据，如下所示：
$。mockjax（{
url： / contacts，
type：GET，
status：200，
statusText：OK，
responseText：{
contacts：[{
id：1，
userName：Barack Obama，
profilePictureUrl：/ img / profilepics / barack.png，
conversation：1
}]，
会话：[{
id：1，
联系人：1，
lastConversationTime：'Sun Jun 07 2015 14:05:50'
}]
}
}）;
演示： http://emberjs.jsbin.com/taboge/1/edit?html,js,output
或者，您可以将关系定义为异步。这将告诉Ember从缺陷关系中剔除后端的记录。
示例：
App.Contact = DS.Model.extend（{
userName：DS.attr（'string'），
profilePictureUrl：DS.attr（'string'），
对话：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。 p $
对话：1
}]
}
}）;
$ .mockjax（{
url：/ conversations / 1，
type：GET，
status：200，
statusText： OK，
responseText：{
对话：{
id：1，
联系人：1，
lastConversationTime：'Sun Jun 07 2015 14:05:50 '
}
}
}）;
演示： http://emberjs.jsbin.com/qejayi/1/edit?html,js,output
异步关系强制您通过承诺与他们合作。
另请注意，您不必将关系的两个方向定义为异步。其实你根本不需要反向关系！如果您想要获取给定对话的用户，则只需要相反的关系。
并且警告说，目前Ember非常渴望请求异步相关记录。如果您只要求相关记录的ID，Ember将会检索整个记录，即使没有必要：该ID已经知道。我希望在即将到来的Ember Data发行版中解决这个问题。
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
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.
这篇关于我的数据在哪里停留在Ember？ <！---->的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
