Ember data from Mirage fails to display on index.hbs

Question

Ember novice here. I have been following along with the tutorial on the Ember website here.

I have been R&D'ing the example to the word and everything works...until I try implementing Mirage. The data just never shows up on the index.hbs page.

Here's my model hook:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('rental');
  },
});

And my model: rental.js

import DS from 'ember-data';
export default DS.Model.extend({
  title: DS.attr('string'),
  owner: DS.attr('string'),
  city: DS.attr('string'),
  type: DS.attr('string'),
  image: DS.attr('string'),
  bedrooms: DS.attr('number')
});

My index.hbs:

<h1> Welcome to Super Rentals </h1>

We hope you find exactly what you're looking for in a place to stay.

{{#each model as |rentalUnit|}}
  {{rental-listing rental=rentalUnit}}
{{/each}}


{{#link-to "about"}}About{{/link-to}}
{{#link-to "contact"}}Click here to contact us.{{/link-to}}

and lastly my app/mirage/config.js:

export default function() {
  this.get('/rentals', function() {
    return {
      data: [{
        type: 'rentals',
        id: 1,
        attributes: {
          title: 'Grand Old Mansion',
          owner: 'Veruca Salt',
          city: 'San Francisco',
          type: 'Estate',
          bedrooms: 15,
          image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg'
        }
      }, {
        type: 'rentals',
        id: 2,
        attributes: {
          title: 'Urban Living',
          owner: 'Mike Teavee',
          city: 'Seattle',
          type: 'Condo',
          bedrooms: 1,
          image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
        }
      }, {
        type: 'rentals',
        id: 3,
        attributes: {
          title: 'Downtown Charm',
          owner: 'Violet Beauregarde',
          city: 'Portland',
          type: 'Apartment',
          bedrooms: 3,
          image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg'
        }
      }]
    };
  });
}

I get two messages in Chrome developer console:

Mirage: Your Ember app tried to GET 'http://localhost:4200/assets/vendor.js', but there was no route defined to handle this request. Define a route that matches this path in your mirage/config.js file. Did you forget to add your namespace?

and this warning:

WARNING: Encountered "data" in payload, but no model was found for model name "datum" (resolved model name using super-rentals@serializer:-rest:.modelNameFromPayloadKey("data"))

However it looks like the info was sucessfully retrieved as I see a:

Successful request: GET /rentals Object {data: Array[3]}

which reflects the proper data. It just is breaking somewhere between that and the index.hbs and I am to novice to figure it out. I'm sure it's just a small misunderstanding on my part. Any help would be appreciated!

Answer 1

You have the wrong version of Ember Data installed. Also make sure you restart the server any time you install a dependency.

The error message that you are getting means that your application is using RESTAdapter (the default adapter for Ember Data 1.x). That is why it looks at the top-level data key and tries to singularize and find the related model.

You can update by following the instructions on the latest Ember CLI release. Or, you can npm install -g ember-cli@beta and start from scratch.