can't display models from ember-data

Question

I am usng Ember.js 1.0.0 RC1 and ember-data revision 12

I have PHP Slim framework in the back and Ember.js as UI. I want to load data from REST backend and list it in the template.

So here is my code:

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

// Store
App.Store = DS.Store.extend({
    revision: 12,
});

// Adaper
DS.RESTAdapter.reopen({
  url: '/slim'
});

// Router
App.Router = Ember.Router.extend();
App.Router.map(function(){
    this.route('ads', {path: '/ads'});
});

// Ad model
App.Ad = DS.Model.extend({
    title: DS.attr('string')
});

// AdsRoute
App.AdsRoute = Ember.Route.extend({
    model: function(){
        return App.Ad.find();
    }
});

Now I try to render my models from the store in my template:

<script type="text/x-handlebars" data-template-name="ads">
<h1>Ads</h1>
{{#each controller}}
    {{title}}
{{/each}}
</script>

Response from backend:

{ads:[{title:"Title" },{ title:"other title" }]}

But nothing from the store is displayed. My question is how should I use data from controller in my handlebars template?

Thx for reading!

SOLUTION

I had to add quotes around JSON response

{"ads":[{ "title":"Title" },{ "title":"other title" }]}

This is a tricky bug to catch because there are no error messages in the console. Thank you so much. Adding quotes around JSON solved it! — HaoQi Li

nrion nrion · Accepted Answer · 2013-03-16T13:09:01

It looks as if the content is never getting set in the controller. I suspect if you add the setupController hook to your App.AdsRoute it will place the items into the controller.

setupController: (controller, model) ->
        controller.set('content', model)

I'm including actual working code from a revision 11 App that I'm currently using. So the model names won't line up but the code is working.

App.ChecksIndexController = Ember.ArrayController.extend
  content: []

App.ChecksIndexRoute = Ember.Route.extend
  enter: ->
    console?.log("Checks Index Route a")
  model: ->
    App.Check.find()
  setupController: (controller, model) ->
    @._super()
    console?.log('route setupController')
    console?.log(model)
    controller.set('content', model)


{{#each item in controller }}
        {{#linkTo checks.show item }}
          <div class="well well-small well-trim-border">
            <h4>{{item.description}}</h5>
          </div>
        {{/linkTo}}
      {{/each}}

The model I'm getting back - includes an id.

{"checks":[{"id":"512e0c6b1769d0805700000b","description":"xyz"}]}

can't display models from ember-data

2 Answers