1

我正在尝试学习 ember，但很难找出为什么我的后端数据没有显示出来。我将 Ember Data 与 Mirage 固定装置一起使用。数据正在显示。只有当我引入简单的关系时，来自这些关系的数据才会显示在我的应用程序中。<!---->当您刚刚进入您的 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

4

1 回答 1

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 版本中得到解决。

于 2015-06-08T11:30:48.013 回答