metkappa metkappa - 4 days ago 5
Javascript Question

Ember model result empty in template but filled in inspector

This is my first app in ember.
I have an API url that output this JSON:

{"search":{"id":"123","idate":"2016-11-20","fdate":"2016-11-25","keywords":["cuccioli","gattini","rocco"]}}


App structure:

app/adapters/application.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
namespace: 'v1',
host: 'http://myhost'
});


app/models/search.js

import DS from 'ember-data';

export default DS.Model.extend({
idate: DS.attr('date'),
fdate: DS.attr('date'),
keywords: DS.attr()
});


app/routes/search.js

import Ember from 'ember';

export default Ember.Route.extend({
model() {
// this not work
return this.get('store').findRecord('search', 123);

// this work
/*return this.get('store').createRecord('search', {
"id": "456",
"idate": "2016-11-24",
"fdate": "2016-12-01",
"keywords": ["ssss", "mmmm"]
}

);*/
}
});


app/templates/components/search.hbs

<h2>Search page</h2>

<ul>
{{#each model as |s|}}
<li>id {{s.id}}</li>
<li>idate {{s.idate}}</li>
<li>fdate {{s.fdate}}</li>
<li>keywords {{s.keywords}}</li>
{{/each}}
</ul>


app/router.js

import Ember from 'ember';
import config from './config/environment';

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

Router.map(function() {
this.route('search');
});

export default Router;


The problem is that the model seems to be empty in template, but it is filled in inspector.

screenshot of template

Thank you in advance for your support. I'll appreciate every answer.

Answer
  • The findRecord method will always return a promise that will be resolved with the record. so instead of each helper you can simply say model.id.
  • While including search component don't forget to include model property.
    {{search model=model }}
Comments