Rendering models from an ember-data store, using a http-mock server and RESTAdapter fails

Question

I'm having some issued with hooking up ember-data to a http-mock using a simple model. I want to load an API containing properties, and render them as a list on a page.

When navigating to the /properties/ route described below, this is the error being thrown:

Error: Not Found
    at ember$data$lib$system$adapter$$Adapter.extend.ajaxError (rest-adapter.js:714)
    at ember$data$lib$system$adapter$$Adapter.extend.ajax.Ember.RSVP.Promise.hash.error (rest-adapter.js:789)
    at jQuery.Callbacks.fire (jquery.js:3143)
    at Object.jQuery.Callbacks.self.fireWith [as rejectWith] (jquery.js:3255)
    at done (jquery.js:9311)
    at XMLHttpRequest.jQuery.ajaxTransport.send.callback (jquery.js:9713)

and the template doesn't render.

Here's what I've done:

Added a property model:

import DS from 'ember-data';

export default DS.Model.extend({
    title: DS.attr('string'),
    date_added:  DS.attr('date')
});

Added a 'routes/properties.js' that looks like this:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('property');
  }
});

Added an application adapter in app.js:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  namespace: 'api',
  host: 'http://localhost:4200/'
});

Used a generator, ember g http-mock property to generate a mock server. Here is a relevant snippet from my server/mocks/property.js:

propertyRouter.get('/', function(req, res) {
  res.send({
    'property': [{
      id: 1,
      title: "Apartament cu 4 camere ultracentral doar pentru pretențioși"
    },(...)]
  });
});

Please note that curl -H "ContentType:application/json" http://localhost:4200/api/property/ works like a charm.

I have a route, this.route("properties", { path: '/properties'}); that renders templates/properties.hbs, and in that template I attempt to display all properties, as follows:

{{#each property as |p|}}
  <div class="property">
    {{p.title}}
  </div>
{{/each}}

If, at 2., I replace return this.store.find('property'); with return [1,2,3], it no longer breaks, and I'm able to iterate that collection. What I found, then, is that this.store.find is what is causing the problem.

Any idea on how to handle this? Do you need any other setup/code snippets?

The versions for ember/ember-data are "ember": "1.11.1", "ember-data": ">= 1.0.0-beta.16.1",

Open dev tools in your browser and go to the network tab, what are the properties of the request generated? — givanse
Ember-data automatically uses an inflector for pluralization. Your node mock should respond to /properties, not /property — Brisc Bogdan
@givanse There are 2 requests that 404 with Cannot GET /properties. Since I configured the RESTAdapter to use /api/ to namespace requests, I don't understand why it isn't looking for /api/properties. — seven7seven
@BriscBogdan Good point, I changes it so the mock server respons to /api/properties/, still no dice. — seven7seven

seven7seven seven7seven · Accepted Answer · 2015-04-23T09:10:08

As I suspected, the REST adapter I was configuring was ignored by the configuration. I solved the problem by declaring an adapter and passing it as an argument when creating the App object.

var customRESTAdapter = DS.RESTAdapter.extend({
  namespace: 'api',
  host: 'http://localhost:4200'
});

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

Word of caution, the previous code at 3. was downright not working, even though it's referenced in at least 3 places in the official documentation. Since I'm just starting to dip into Ember, this was kind of a disappointment, I'm not sure how up-to-date the docs are, but yeah be wary.

This, alongside @BriscBogdan's mention of rember-data's automatic inflexion solved my issue.

Rendering models from an ember-data store, using a http-mock server and RESTAdapter fails

2 Answers