rest - Decent tutorial on ember cli how to fetch JSON response -


i've been wasting journey trying find out simple tutorial explaining how make simple app using ember cli treating basic json file...i've read www.ember-cli.com of course, explain lot things but..i don't know how proceed. there basic example explaining (dummies level) how make simple app parses json response? i've used restadapter, have build muy model don't know how make in order send kind of response template..

this persons.js file under app/adapters folder

import ds 'ember-data';  var applicationadapter = ds.restadapter.extend({       host: 'http://localhost:8000/persons',    namespace: 'person' });    export default applicationadapter; 

this persons.js model file under app/model

import ds 'ember-data';  export default ds.model.extend({   firstname: ds.attr('string'),   lastname: ds.attr('string'),   occupation: ds.attr('string') }); 

this handlebars template persons-tmp.hbs file under app/templates/components

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

my persons.js file undert folder app/routes

import ember 'ember';      export default ember.route.extend({           model: function() {             return this.store.findall('persons');         }     }) 

and json response of call http://localhost:8000/persons:

"person": {     "firstname": "barack",     "lastname": "obama",     "occupation": "president"   } 

i don't know why don't data on template result--..

i have tried twilio tutorial (wich 1 best i've found) ...but doesn't work

sorry simplicity!

your template not know model unless defined in route. each page of application should have corresponding route (if using default structure, in app/routes/yourroute.js; if using pod structure app/your-route/route.js). file hit model.

if model called accounts:

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

now template route have access model, comes store. store uses adapter hit api. if results aren't being returned correctly, make sure restadapter serializing data correctly.

your model

when generate model in ember-cli, should have entered ember generate model accounts terminal/command line. create: app/model/accounts.js or (if using pod stucture) app/accounts/model.js.

this model automatically app/adapters/accounts.js if there, otherwise default app/adapters/application.js. however, list main.js file--which means writing manually , not using command line.

if using ember-cli, should try generating through command line/terminal rather manually adding yourself. resolver may give unexpected behavior if within in ember-cli application.

for adapter, if model called names, automatically append namespace/host defined in application adapter. if need info superapi.com/names/accounts instance:

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

if in console, should tell domain trying hit. if running on localhost , trying hit outside source, browser may stopping security reasons.

serving api locally

if api hosted locally on different port (i.e. in localhost:8000) can run ember server through proxy. when run server through command line can enter ember server --proxy http://localhost:8000. benefit of doing can update host of adapter api/v1 if api localhost:8000/api/v1.

async data & promise chaining

if aren't getting errors, ember not serving data fast enough--i.e. loading template before data returned api. when want rsvp on model (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);     } }); 

essentially, tell app not load things until data has been returned api--i.e. promises upon fetching data , not before.


Comments