mercredi 22 avril 2015

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

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:

  1. Added a property model:
import DS from 'ember-data';

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

  1. 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');
  }
});

  1. Added an application adapter in app.js:
App.ApplicationAdapter = DS.RESTAdapter.extend({
  namespace: 'api',
  host: 'http://localhost:4200/'
});

  1. 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.

  1. 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}}

  1. 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",




Aucun commentaire:

Enregistrer un commentaire