Question

我正在尝试学习余烬，但很难找到为什么我的后端数据没有显示出来。我使用Ember Data和海市蜃楼灯具。数据显示出来。只有当我引入简单的关系时，这些关系中的数据才会显示在我的应用中。当您在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');

}

＆＃13;

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'
    }]
  }
  
});

＆＃13;

<!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>

＆＃13;

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 Data版本之一中解决此问题。

我的数据在哪里被Ember困住了？ <！---->

1 个答案: