1
votes

new to ember js, and working on an app using ember-data. If I test with same data using FixtureAdapter, everything populates in the html template ok. When I switch to RESTAdapter, the data looks like it's coming back ok, but the models are not being populated in the template? Any ideas? Here's the code:

App.Store = DS.Store.extend({
  revision:12,
  //adapter: 'DS.FixtureAdapter'
  adapter: DS.RESTAdapter.extend({
    url:'http://bbx-dev.footballamerica.com/builderapirequest/bat'
  })
});

App.Brand = DS.Model.extend({
  name: DS.attr('string'),
  numStyles: DS.attr('string'),
  vendorId: DS.attr('string')
});

App.BrandsRoute = Ember.Route.extend({
  setupController:function(controller){
  },
  model:function(){
    return App.Brand.find(); 
  }
});

And here is the data coming back, but not being inserted into the template!

 returnValue: [{numStyles:1, name:Easton, vendorId:6043}, {numStyles:1, name:Louisville     Slugger, vendorId:6075},…]
0: {numStyles:1, name:Easton, vendorId:6043}
1: {numStyles:1, name:Louisville Slugger, vendorId:6075}
2: {numStyles:1, name:Rawlings, vendorId:6109}
3: {numStyles:7, name:BWP Bats , vendorId:6496}
4: {numStyles:1, name:DeMarini, vendorId:W002}
status: "ok"

And here is the template:

{{#each brand in model.returnValue }}
  <div class="brand-node"{{action select brand}}>
    <h2>{{brand.name}}</h2>
    <p>{{brand.numStyles}} Styles</p>
  </div>
{{/each}}

Any help would be greatly appreciated! I'm not getting any errors, and the data seems to be coming back ok, just not getting into the template. Not sure if the returned dataset needs "id" param?

I am also using the Store congfig to alter the find() from plural to singular:

 DS.RESTAdapter.configure("plurals", {
   brand: "brand"
 });

The way the API was written, its expecting "brand" and not "brands"... maybe its something to do with this??

Thanks in advance.

1

1 Answers

0
votes

You have stated:

Not sure if the returned dataset needs "id" param?

Yes you are guessing right, you data coming back from the backend need's an id field set. And if the id field name is different then id you should also define this in ember like so:

App.Store = DS.Store.extend({
  revision:12,
  //adapter: 'DS.FixtureAdapter'
  adapter: DS.RESTAdapter.extend({
    url:'http://bbx-dev.footballamerica.com/builderapirequest/bat'
  }),
  serializer: DS.RESTSerializer.extend({
    primaryKey: function (type) {
      return '_my_super_custom_ID'; // Only needed if your id field name is different than 'id'
    }
  })
});

I suppose your Fixtures have an id defined thus it works, right?

Note: you don't need to define the id field at all explicitly, ember add's automatically the id field to a model, so your model is correct.

Here a website that is still a WIP but can be good reference for this conventions and as stated there:

The document MUST contain an id key.

And this is how your JSON should look like for a collection of records:

{
  "brands": [{
    "id": "1", 
    "numStyles": "1", 
    "name": "Easton", 
    "vendorId" :"6043"
  }, {
    "id": "2", 
    "numStyles": "4", 
    "name": "Siemens", 
    "vendorId": "6123"
  }/** and so on**/]
}

Note: as you have shown you JSON root is called returnValue this should be called brand or brands if you are not adapting the plurals. See here for reference for the JSON root I'm talking about.

Hope it helps