Ember template not showing any data

Question

I am just starting out with Ember.js and I am using ember-rails on the back end. The problem that I am having is that I am getting a list of items but no data is being rendered in my template.

router.js.coffee

App.Router.map (match)->
# match('/').to('index')
   @resource "stories"

stories_route.js.coffee

App.StoriesRoute = Ember.Route.extend
model: -> 
    App.Story.find()

stories.handlebars

<h1>Stories</h1>

<ul>
{{#each story in controller}}
      <li>{{story.title}} A</li>
{{else}}
      <li>There are no stories.</li>
{{/each}}
</ul>

{{outlet}}

Here is the JSON that I am getting back from Rails:

{
   "stories":[
      {
         "story":{
            "id":1,
            "title":"Test",
            "description":"This is a test story"
         }
      }
   ]
}

Edit:

I am able to get the correct template to render, it is just that the data is empty.

Here is what the HTML looks like:

<div id="ember295" class="ember-view">
   <h1>Stories</h1>
   <ul>
   <script id="metamorph-2-start" type="text/x-placeholder">
   </script>
   <script id="metamorph-4-start" type="text/x-placeholder">
   </script>
      <li>
         <script id="metamorph-5-start" type="text/x-placeholder">
         </script>
         <script id="metamorph-5-end" type="text/x-placeholder">
         </script>
         A
      </li>
    <script id="metamorph-4-end" type="text/x-placeholder">
    </script>
    <script id="metamorph-2-end" type="text/x-placeholder">
    </script>
  </ul>
  <script id="metamorph-3-start" type="text/x-placeholder">
  </script>
  <script id="metamorph-3-end" type="text/x-placeholder"></script>
</div>

I've edited my answer reflecting a more simpler solution, have a look... — intuitivepixel, Jun 03 '13 at 14:27
I guess that now the problem is your JSON, can you alter the API response serverside and remove the additionally `story` level? — intuitivepixel, Jun 03 '13 at 14:56

intuitivepixel · Accepted Answer · 2013-06-03T15:20:53.310

0

If stories is your first route and accessible at "/" then you can define a path like:

App.Router.map () ->
  @resource('stories', {path: '/'})

OR you can define an index route and redirect from there like:

App.IndexRoute = Ember.Route.extend
  redirect: ->
    @transitionTo('stories')

See here a working jsbin that shows the second concept.

EDIT

I guess your problem is now that if your result contains a collection of records you need to remove the additional story level in your JSON resulting in something like:

{
  "stories":[
    {
      "id":1,
      "title":"Test",
      "description":"This is a test story"
    }
  ]
}

and for a single record e.g. /stories/123 your JSON should look like:

{
  "id":1,
  "title":"Test",
  "description":"This is a test story"
}

Hope it helps

edited Jun 03 '13 at 15:20

answered Jun 03 '13 at 13:44

intuitivepixel

23,302
3
57
51

The correct template is getting rendered, it just that there is no data displayed. It seems to know that there is a single item in the array so a `
` is created.

BGabriel

Jun 03 '13 at 14:49

Yup, the JSON formatting was causing the issue. I am using RABL so in the the rab_init.rb, I added `config.include_json_root = false`. Thanks! – BGabriel Jun 03 '13 at 15:50

Ember template not showing any data

1 Answers1