samedi 14 juillet 2018

Using and binding JSONAPI attributes data in ember js

I have an ember.js toy application that I want to hook into a JSONAPI REST service for obtaining and displaying data. I can trace in my browser's developer console, that indeed, ember-data initiates the appropriate GET requests and receives proper, valid JSONAPI response bodies.

// ./app/models/person.js
import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  email: DS.attr('string'),
  birthdate: DS.attr('string')
});
// ./app/adapters/person.js
import ApplicationAdapter from './application';

export default ApplicationAdapter.extend({
  pathForType() {
    return "persons";
  }
});
// ./app/adapters/application.js
import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
    host: 'http://localhost:5000'
});
// ./app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function () {
  this.route('persons', function() {
    this.route('show', { path: '/:person_id' });
  });
});
export default Router;
// ./app/routes/persons/show.js
import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    return this.get('store').findRecord('person', params.person_id);
  }
});
// ./app/routes/persons/index.js
import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.get('store').findAll("person");
  }
});
// ./app/routes/application.js
import Route from '@ember/routing/route';

export default Route.extend({
});
// ./app/app.js
import Application from '@ember/application';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

const App = Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;
// ./app/resolver.js
import Resolver from 'ember-resolver';

export default Resolver;

Unfortunately, when I want to use the model in my template, I can only access the element ids, and not the data attributes like name (Remains empty when rendered).

<!-- ./app/templates/persons/index.hbs -->

<li>
    Person  
    
    
    Link 
    
</li>


I am a bit at loss for why this happens. Am I doing something wrong?




Aucun commentaire:

Enregistrer un commentaire