Accessing Model Data in Template - ember.js

Question

I have a route defined like so:
Router.map(function() {
this.route('games', function() {
this.route('game', {path: '/:game_id'}, function() {});
});
});
When I visit path /games/1 I have to access the model data like so:
{{model.title}}
Reading the documentation, it seems that the controller would make the model data available without the model prefix so I thought I'd be able to do this:
{{title}}
But it doesn't work without model. I'm not creating the controller because I don't need to extend it for this particular route/template. Is accessing the model data via the model prefix accurate? Or am I possibly doing something else wrong?

Answer 1

The docs you are referring to are old, in the past (pre 1.13 iirc) the controller had a model proxy that would look up properties on the model if they weren't found on the controller.
This is no longer available since it was causing confusion in the community.
The new versions of the docs no longer reference {{title}} without model.
If you really want to use it without the model prefix you could resort to Ember.computed.alias though I would recommend sticking with model. as it is easier to read and identify as a model property vs controller property, especially since routable components are set to replace controllers in the near future (~2.6).

Answer 2

You can either use {{model.title}} or {{content.title}}. Earlier it possible to access properties directly using ObjectControllers but now as those are gone there is no other way.
[Edits]
There is one more way, you can extend setupController in route and set title on controller itself. That way you'll be able to directly use {{title}}.
setupController: function(controller, model) {
this._super(controller, model);
controller.set('title', model.get('title'));
}
Hope this helps.

Answer 3

In Ember, your model must be loaded by a route as described in the documentation here.
Assuming you are using ember-cli your route will look like :
export default Ember.Route.extend({
model: function() {
// Must return some data or promises
}
});
Model function can either return an array of data or a promises that will resolve to an array.
If you are using ember-data your function return will look like this :
return this.store.find('game', params.game_id);
You can also request directly to an API :
return Ember.$.getJSON('https://your-website.com/game/' + params.game_id);