super-rentals | Codebase for the Super Rentals official tutorial | Frontend Framework library

Are you able to provide a link to your example? By having each piece of the ember application you mention it would be best to answer definitely. I can give a general answer with strategies for debugging the template.

The conventions behind ember.js make understanding the "whys" frustrating at first and possibly opaque. Ember's handlebars implementation governs how values are populated and accessed within templates using very specific rules. Ember treats templates (handlebars files) differently depending on whether it is for a route or component. Component's have an isolated context and must receive values by explicit passing in or dependency injection. Then, you can use such values in a component's template by accessing those properties with {{this.somePassedInValue}}.

In the super-rentals app, it appears the rental index route invokes the components responsible for displaying the individual units. I found this in app/templates/rentals/index.hbs.

Is there a specific reason you are starting with Ember 2.8? Unless there is, I would suggest fully removing Ember-CLI (npm uninstall -g ember-cli) and starting over with Ember 3.0.

The reason I suggest that is that the errors you are seeing there look to be due to Babel upgrades that Mirage is expecting in the latest version of Mirage but that don’t exist in the older version of Ember that you have installed.

I would say, returning Promise instead of helper you can try computed property. You can create computed property which depends on location. Refer this sample twiddle

The problem is that; city-temperature is a component; and by default ember components is assigned div as their tags. Due to this; the content of city-temperature starts at a new line.

What can you do? Play with css and make sure div tag of city-temperature does not start at a new line; but instead floating right within the owner div. The second option is making city-temperature component tagless; so that it does not start at a new line. To achieve that; you can just declare:

You need to configure mirage to allow you making calls to outside in case mirage is active; what I mean is using this.passthrough function within mirage/config.js, that is explained in api documentation quite well.

Regarding your question about where to make the remote call is; it depends:

• If you need the data from the server to arrive in case a route is about to open; you should prefer putting it within model hook of the corresponding route.
• If you intend to develop a component that is to be reused from within different routes or even from within different applications with the same remote call over and over again; you can consider putting the ajax remote call to a component. Even if that is not a very common case usually; it might be the case that a component itself should be wrapped up to fetch the data and display it by itself for reusing in different places; there is nothing that prevents you to do so. However by usually applying data-down action-up principle; generally the remote calls fall into routes or controllers.
• Whether using an ember-data model is another thing to consider. If you intend to use ember-data; you should not directly use Ember.$.ajax but rather be using store provided by ember-data and perhaps providing your custom adapter/serializer to convert data to the format ember-data accepts in case the server do not match to the formats that ember-data accepts. In summary; you do not need to use models if you use pure ajax as you do in this question.

EDIT: the answer still lies with JSON.parse(JSON.stringify(data)), but I updated with kumkanillam's much simpler approach returning the data.

It turned out the error was coming from Array.toString being called on the data being returned from the model hook. It worked fine on a hard-coded array of objects, but not when returned via RSVP as I have in my question.

Upon inspecting both, it turned out, when using Ember.RSVP, the objects in the returned array lacked a toString method on them, somehow... I tried solving this via setting the prototype with Object.create(), but didn't work.

Bottom line is, and I'm still not 100% clear, I thought maybe Ember was turning my array into something else (an Ember Object?), not just a plain JS array of objects. So I ended up converting the returned data into a plain JS object again, via this answer.

Route now looks like this: