Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Ember.js Models Challenge 1: Loading Arrays

Posted by Kristina Gillooly
Kristina Gillooly
9,546 Points

ember.js MODELS first challenge

Now, within the "kittens" template in index.html, list the names of all the kittens in <li> tags within the <ul> tag.

not sure where i am going wrong......

js/app.js 
AnimalShelter = Ember.Application.create();

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

var kittens = [
  {id: '1', name: 'Meowzer'},
  {id: '2', name: 'Squeaky'},
  {id: '3', name: 'Fluffy'}
]

AnimalShelter.KittensRoute = Ember.Route.extend({
  model: function(params) {
    return kittens;
  }// your code here
});
index.html 
<!DOCTYPE html>
<html>
<head>
  <title>Animal Shelter</title>
</head>
<body>
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-1.8.1.js"></script>
  <script src="js/app.js"></script>

  <script type="text/x-handlebars" id="kittens">
    <h1>Kittens</h1>
    <p>Here is a list of all of our kittens:</p>
    <ul>
      {{each}}
      <li>{{name}}</li>
      {{/each>}}
      <!-- your code here -->
    </ul>
  </script>

</body>
</html>
Christopher Jones
Christopher Jones
15,917 Points

Hi Kristina, it looks like your first {{each}} is missing a # and your closing {{/each}} has an unnecessary > in it. That should fix it!

Happy to help another Louisville based developer!

1 Answer

Nicolas Sandller
Nicolas Sandller
5,643 Points
Nicolas Sandller
Nicolas Sandller
5,643 Points

I think this would be the "ember" way of doing it:

  <script type="text/x-handlebars" id="kittens">
    <h1>Kittens</h1>
    <p>Here is a list of all of our kittens:</p>
    <ul>
      {{#each item in model}}
      <li>{{item.name}}</li>
      {{/each>}}
      <!-- your code here -->
    </ul>
  </script>

You were missing "#" and also remember this works like a for loop in javascript, you are looping over an array of objects. For each item give me back the items name (item.name).

Hope this helps.