Ember.js不呈现数据

Question

Okay, I've been scratching my head with this for a while now. I'm trying to load some simple data via a RESTful API, but I can't get the data to actually show up. I can see that the proper API call is being made (with auth header properly set) and the data is being returned, but it just never shows up. Any help would be greatly appreciated.

Here's my javascript:

window.App = Ember.Application.create();

App.Store = DS.Store.extend({
  revision: 13
});
DS.RESTAdapter.reopen({
  namespace: 'api',
  headers: {
    'X_AUTH_TOKEN': user_api_key
  }
});

App.Router = Ember.Router.extend();
App.Router.map(function () {
  this.resource('config_items');
});

App.ConfigItem = DS.Model.extend({
  name: DS.attr('string'),
  value: DS.attr('string')
});

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

And the template (in HAML):

%script(type="text/x-handlebars" data-template-name="config_items")
  %ul#config-item-list
    {{#each controller}}
    %li {{name}}: {{value}}
    {{/each}}

And the data returned by the API call:

{"config_items":[
  {
    "id":6,
    "organization_id":1,
    "name":"test",
    "value":"1234",
    "created_at":"2013-08-24T00:54:07Z",
    "updated_at":"2013-08-24T00:54:07Z"
  },{
    "id":9,
    "organization_id":1,
    "name":"qwer",
    "value":"tyui",
    "created_at":"2013-08-24T01:02:35Z",
    "updated_at":"2013-08-24T01:02:35Z"
  },{
    "id":11,
    "organization_id":1,
    "name":"6666666",
    "value":"gggg",
    "created_at":"2013-08-24T01:02:59Z",
    "updated_at":"2013-08-24T01:02:59Z"
  }
]}

Answer 1

To make your items show up you need to make some changes to your code.

Let's get to it, first remove this line:

App.Router = Ember.Router.extend();

This is not necessary since ember will lookup you App namespace for a property called Router already.

Then, change your router map to this, adding {path: '/'} , this will make your config_items template render directly when visiting '/' as we have defined it in the config_items resource path property.

App.Router.map(function () {
  this.resource('config_items', {path: '/'});
});

And finally add the ConfigItemsRoute from which model hook you call find()

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

And last but not least here a demo kind of: http://jsbin.com/odosoy/110/edit

Hope it helps.