Question

我一直在浪费我的所有旅程，试图找到一个简单的教程，解释如何使用ember cli制作一个简单的应用程序来处理基本的json文件...我已经阅读了www.ember-cli .com当然，他们解释了很多东西但是......我不知道如何继续。是否有一个基本的例子解释（假人水平）如何制作一个解析json响应的简单应用程序？我已经使用了RESTAdapter，我已经构建了muy模型，但我真的不知道如何制作以便向我的模板发送一种响应..

这是 app / adapters 文件夹下的 persons.js 文件

import DS from 'ember-data';

var ApplicationAdapter = DS.RESTAdapter.extend({  
    host: 'http://localhost:8000/persons',
   namespace: 'person'
});



export default ApplicationAdapter;

这是 app / model

下的 persons.js 模型文件

import DS from 'ember-data';

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  occupation: DS.attr('string')
});

这是 app / templates / components

下的手柄模板 persons-tmp.hbs 文件

<ul>    
{{#each model as |item|}}
        <li>{{item.firstName}}</li>
      {{/each}}
</ul>

我的 persons.js 文件处于文件夹 app / routes

import Ember from 'ember';

    export default Ember.Route.extend({  
        model: function() {
            return this.store.findAll('persons');
        }
    })

最后调用http://localhost:8000/persons的json响应：

"person": {
    "firstName": "Barack",
    "lastName": "Obama",
    "occupation": "President"
  }

我不知道为什么，但我无法获得有关模板结果的任何数据 - ..

我也尝试了twilio tutorial（这是我发现的最好的一个）......但即使这样也无法运作

抱歉简单！

Answer 1

除非在您的路线中定义，否则您的模板将无法了解该模型。应用程序的每个页面都应该有相应的路径（如果您使用的是默认结构，请查看app / routes / yourRoute.js;如果您使用的是pod结构app / your-route / route.js）。这是您打算使用模型的文件。

如果您的模型被称为accounts：

export default Route.extend({
  model() {
    return this.store.findAll('accounts'),
  }
});

现在，您的该路线模板可以访问来自您商店的模型。您的商店使用您的适配器来访问API。如果未正确返回结果，请确保RESTAdapter正确序列化数据。

您的模型

在ember-cli中生成模型时，应该已将ember generate model accounts输入到终端/命令行中。这将创建：app/model/accounts.js或（如果使用pod结构）app/accounts/model.js。

此模型会自动查看app/adapters/accounts.js是否存在，否则默认为app/adapters/application.js。但是，您列出了main.js文件 - 这意味着您最有可能手动编写此文件而不使用命令行。

如果您使用的是Ember-CLI，您应该尝试通过命令行/终端生成所有内容，而不是自己手动添加它。如果您在Ember-CLI应用程序中，解析程序可能会给您一些意外行为。

对于适配器，如果model被称为names，它将自动将其附加到应用程序适配器中定义的命名空间/主机。如果您需要从superapi.com/names/accounts获取信息，例如：

export default RESTAdapter.extend({
  host: 'http://superapi.com',
  namespace: 'names'
});

如果您查看控制台，它应该告诉您要尝试的域名。如果您在localhost上运行并尝试访问外部源，则出于安全原因，您的浏览器可能会阻止您。

在本地提供API

如果您的API本地托管在其他端口（即localhost:8000），您可以通过代理运行您的ember服务器。通过命令行运行服务器时，可以输入ember server --proxy http://localhost:8000。这样做的好处是，如果您的API通常为host，您现在可以将适配器的api/v1更新为localhost:8000/api/v1。

异步数据＆amp;承诺链接

如果您没有收到任何错误，Ember很可能不会足够快地提供数据 - 即。它是在从API返回数据之前加载模板。这是您想要在模型上进行RSVP（http://guides.emberjs.com/v1.10.0/routing/asynchronous-routing/）

的时候

export default Ember.Route.extend({  
    model: function() {
        return Ember.RSVP.hash({
          this.store.findAll('persons')
        })
    },
    setupController: function(controller, hash) {
       Ember.setProperties(controller, hash);
    }
});

基本上，它会告诉你的应用程序在从API返回数据之前不要加载某些东西 - 即。它承诺在获取数据时做一些事情，而不是之前。

关于ember cli的体面教程如何获取JSON响应

1 个答案: