我的数据在哪里卡在了 Ember 中？

Question

我正在努力学习 ember，但很难找出为什么我的后端数据没有显示出来。我正在使用 Ember 数据和海市蜃楼装置。数据正在显示。只有当我引入简单关系时，这些关系中的数据才不会显示在我的应用程序中。当您在 ember 应用程序中获得  时，是否有通用的调试方法？

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 数据：1.0.0-beta.19 jQuery: 1.11.3

这是一个重现问题的 JSBin： http://emberjs.jsbin.com/deledemaya/1/edit?html,js,output

Answer 1

查看 JSBin 示例。

您的代码中有很多问题。

首先，在您的模板中，您要像这样访问 conversation 模型：

<ul>
  {{#each model as |contact|}}
    <li>{{contact.userName}}</li>
    <li>{{conversation.lastConversationTime}}</li>
  {{/each}}
</ul>

conversation 未在任何地方定义。由于 conversation 是 contact 上的关系，您应该像这样通过 contact 访问它：

    <li>{{contact.conversation.lastConversationTime}}</li>

请注意，您不需要定义 conversation 路由即可通过 contact 路由中的联系人访问对话。

然后，惯例是将模型命名为 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
    }],
    conversations: [{
      id: 1,
      contact: 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'),
  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'
    }
  }
});

演示：http://emberjs.jsbin.com/qejayi/1/edit?html,js,output

异步关系迫使您通过承诺与他们合作。

另请注意，您不必将关系的两个方向都定义为异步。事实上，你根本不需要反向关系！如果你想为给定的对话获取用户，你只需要反向关系。

请注意，目前 Ember 非常渴望请求异步相关记录。如果您只要求相关记录的 ID，Ember 将检索整个记录，即使这不是必需的：ID 已经知道。我希望在即将发布的 Ember 数据版本中看到这个问题得到解决。

我的数据在哪里卡在了 Ember 中？

Where did my data get stuck in Ember?

ember.js

ember-data

ember-cli-mirage