Emberjs template not binding to restful data

Question

Got this route to get the data from a restful service

var App = Ember.Application.create({rootElement: '#planner'});
App.Store = DS.Store.extend();
App.Router.map(function(){
    this.resource('home');
});
App.HomeRoute = Ember.Route.extend({
    model: function(){
        return Ember.$.getJSON('/api/get-planner/');
    }
});

And template:

<script type="text/x-handlebars" data-template-name="home">
    {{name}}
</script>

Somehow the value of name is not displayed. I can confirm the api is returning correct json data.

Answer 1

Ember-Data expects the JSON like this:

{
    planner: {
        name: 'Test'
        // your data
    }
}

So if your API returns this JSON:

{
    name: 'Test'
}

It won't work. I would suggest to use Ember-Model instead ( https://github.com/ebryn/ember-model ), since it is more stable and allows you to customize the behavior of the REST adapter.

Your code might look like this:

 App.PlannerModel = Ember.Model.extend({
     name: Ember.attr(),
     // see the documentation of ember-model for this
 });

 App.PlannerModel.url = '/api/get-planner/';
 App.PlannerModel.adapter = Ember.RESTAdapter.create();

 App.HomeRoute = Ember.Route.extend({
   model: function() {
       return App.PlannerModel.find();
   }
});

If you want to take this approach, make sure not to include Ember-Data and use Ember-Model instead.