Question

我是Ember的新手，我每天都在学习和学习。作为一项挑战，我很难从RESTful API pokeapi.co获取数据我想获得结果的名称和网址https://pokeapi.co/api/v2/pokemon/ 然后将ID作为参数传递并获取https://pokeapi.co/api/v2/pokemon/1/ / 2/3等中的所有数据。

我被卡住了，请帮帮我.... 我的代码：

适配器/ pokemon.js

FirebaseDatabase myMessage = FirebaseDatabase.getInstance(); 
final DatabaseReference mine = myMessage.getReference(facebookUserName +`` "myMessageList").push();
mine.setValue(new MyMessageListModel(to));

模型/ pokemon.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
    host:'https://pokeapi.co',
    namespace: 'api/v2',

    pathForType(){
        return 'pokemon';
    }
});

路由/ pokemon.js

import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),
    url: DS.attr('string')
});

串行/ pokemon.js

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

export default Route.extend({
    model(){
        return this.store.findAll('pokemon')
//    setupController(controller, model){
//    controller.set('pokemons',model);
    }
});

模板/ pokemon.hbs

import DS from 'ember-data';

export default DS.RESTSerializer.extend({

    normalizeResponse(store, primaryModelClass, payload, id, requestType){
        payload = {
            pokemon: payload
        },
        console.log(payload);
        return this._super(store, primaryModelClass, payload, id, requestType);
   }
});

控制台：

{{#each model as |pokemon|}}
      <div class="md-list-item-text">
         <h3>#{{pokemon.id}}: {{pokemon.name}}</h3>
        </div>
{{/each}}

Answer 1

我按照sheriffderek发布的twiddle并重新编写了所有代码。现在它正在工作：）

// app / adapters / monster.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host:'https://pokeapi.co',
  namespace: 'api/v2',

  pathForType() {
    return 'pokemon';
  },
});

// app / models / monster.js

import DS from 'ember-data';
import { computed } from '@ember/object';

export default DS.Model.extend({
  number: computed('url', function() {
    var fullUrl = this.get('url');
    return fullUrl.split('/')[6];
  }),
  name: DS.attr(),
  url: DS.attr(),
});

// app / routes / monster / monster-detail.js

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

export default Route.extend({
  model(params) { 
    var monster = this.store.findRecord('monster', params.number);
    console.info('incomming monster', monster);
    return monster;
  }
});

// app / serializers / monster.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  primaryKey: 'url', 

  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = {
      monster: payload.results,
    }
    console.log(payload);
    return this._super(store, primaryModelClass, payload, id, requestType);
  }
});

{{！ - app / templates / monsters / monster-list.hbs - }}

<h2>/pokemon-list</h2>

<ul class='monster-list'>
  {{#each model as |monster|}}
    <li>
      #:{{monster.number}} Pokemon:{{monster.name}} - 
     </li>
  {{/each}}
</ul>

EmberJS从RESTful api解析数据

1 个答案: