如何在Ember JS中获得REST Api？

Question

我使用的是与REST Api一起使用的Ember样板。

数据应从Laravel后端接收，并呈现在Ember模板中。我将不胜感激。

这是索引（/）路由的响应：

{
    "responce":[
        {
            "id":0,
            "title":"main",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam."
        },
        {
            "id":1,
            "name":"about",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, obcaecati? Accusantium ex dolorum voluptate deleniti?"
        },
        {
            "id":2,
            "name":"contacts",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus exercitationem molestias rem."
        }
    ]
}

我想应该有某种循环来处理接收到的数据并将其呈现。结果应该是这样的：

<h3>main</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam.</p>
<h3>about</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, obcaecati? Accusantium ex dolorum voluptate deleniti?</p>
<h3>contacts</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus exercitationem molestias rem.</p> 

提前致谢！

Answer 1

这里有很多内容可以组合在一起，但是让我尝试设计总体路径。您的Laravel API提供的结构化数据需要由余烬应用程序读取。首先，设置您的余烬路由模型挂钩以读取该数据。你要检查指导了很多详细信息，但我会开始这在你index的第一步路线：

import Route from '@ember/routing/route';
import fetch from 'fetch';

export default Route.extend({
  model() {
    //this is where your ember app gets data from your API
    return fetch('YOUR-LARAVAL-API.com/index').then(response => {
      console.log(data);
      const data = response.json();
      return data.responce;
    });
  }
});

这应该使数据在index.hbh模板中可用，以便您可以model像以下方式访问它：

<pre>
{{#each this.model as |post|}}
  <h3>{{post.title}}</h3>
  <p>{{post.content}}</p>
{{/each}}
</pre>