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

Question

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

这是app/adapters文件夹下的person.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下的handlebars模板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 / people的json响应:

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

我不知道为什么,但我没有得到关于我的模板结果的任何数据 - ..

我也尝试了twilio教程(这是我发现的最好的教程)......但即使这样也行不通

对不起,简单!

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本地托管在不同的端口(即in localhost:8000),您可以通过代理运行您的ember服务器.通过命令行运行服务器时,可以输入ember server --proxy http://localhost:8000.这样做的好处是,如果您的api正常,您现在可以更新host适配器.api/v1localhost:8000/api/v1

异步数据和承诺链接

如果您没有收到任何错误,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返回数据之前不要加载某些内容 - 即它承诺在获取数据时执行某些操作,而不是之前.