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 Loading Arrays of JavaScript objects

Posted by Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

FYI: The {{#each}} loop during the demonstration of looping over an array/model in Ember Apps is deprecated...

Just a Head's up to people who decide to start this course this month with the latest version(s) of Ember since this course was released involving plain old javascript objects (POJOs):

The plain {{#each}} loop is now deprecated, the following should be done instead:

{{#each post in model}}
  <!-- The intent of your loop, like post.title, post.author_name, and etc...
{{\each}}

Also, there seems to be a minor tweak to how models are hooked from the route to the controller; being familiar with Ember in the past, I'll update this thread if the changes aren't intuitive .

Edit: Used posts instead of model by mistake

Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Maybe Michael Kaiser-Nyman can comment what may also deprecate the instructions about loading POJOs through Arrays (though in practice I and most would use Fixtures at worst)....

index.haml

!!! 5
%html{:lang => "en"}
  %head
    %meta{:charset => "UTF-8"}
    %title
    %link{ :rel => "stylesheet", :href => "./css/bootstrap.min.css" }
    %script{ src: "libs/jquery.js" }
    %script{ src: "libs/handlebars.js" }
    %script{ src: "libs/ember-handlebars-loader.js" }
    %script{ src: "libs/ember.js" }
    %script{ src: "./blogger.js" }
    %script{ src: "./router.js" }
    %script{ src: "./store.js" }
    %script{ src: "controllers/about.js" }
    %script{ src: "controllers/contact.js" }
    %script{ src: "routes/posts.js" }

  %body
    :javascript
      EmberHandlebarsLoader.loadTemplates( [ 'posts', 'about', 'contact', 'phone', 'email', 'application' ] );

templates/posts.hbs

<h1>Drucula's Blog</h1>
<ul>
  {{#each post in posts}}  
    <li>
      <a href="#">{{post.title}}</a>
    </li>
  {{/each}}
</ul>

routes/posts.js

Blogger.PostsRoute = Ember.Route.extend({
  // The default properties of an Ember Controller
  controllerName: 'posts',
  renderTemplate: function(){
    this.render('posts');
  },
  model: function(){
    return posts;
  }


});

router.js

Blogger.Router.map(function(){
  this.resource('posts', { path: '/' });
  this.resource( 'about' );
  this.resource( 'contact', function(){
    this.resource( 'phone' );
    this.resource( 'email' );
  } );
});

store.js

var posts = [
  {
    id: '1',
    title: 'I love blood',
    body: "Dolor quibusdam officiis beatae architecto dolor at harum sint! Sequi incidunt sunt inventore quis ratione ea repellat consectetur eius rem non odit omnis esse totam! Suscipit ex modi repellat quasi!"
  },

  {
    id: '2',
    title: 'Title 2',
    body: "Dolor quibusdam officiis beatae architecto dolor at harum sint! Sequi incidunt sunt inventore quis ratione ea repellat consectetur eius rem non odit omnis esse totam! Suscipit ex modi repellat quasi!"
  },
  {
    id: '3',
    title: 'Title 3',
    body: "Dolor quibusdam officiis beatae architecto dolor at harum sint! Sequi incidunt sunt inventore quis ratione ea repellat consectetur eius rem non odit omnis esse totam! Suscipit ex modi repellat quasi!"
  },

  {
    id: '4',
    title: 'Title 4',
    body: "Dolor quibusdam officiis beatae architecto dolor at harum sint! Sequi incidunt sunt inventore quis ratione ea repellat consectetur eius rem non odit omnis esse totam! Suscipit ex modi repellat quasi!"
  }

];
Benjamin Dalton
Benjamin Dalton
10,725 Points
Benjamin Dalton
Benjamin Dalton
10,725 Points

Thanks! It's not as simple as the deprecated each but I suppose it's possible it's needed for some very necessary reason or they wouldn't have changed it. Maybe some each's were getting their streams crossed?

4 Answers

Michael Kaiser-Nyman
STAFF
Michael Kaiser-Nyman
Treehouse Guest Teacher
Michael Kaiser-Nyman
Michael Kaiser-Nyman
Treehouse Guest Teacher

Kevin Lozandier thanks for all your help on the forums with Ember! This deprecation is because of the confusion that can be caused by the context switching the block helper does. The Ember folks decided we should be more explicit. They also are changing the preferred syntax to {{#each model as |post|}}, which is even more readable and clear.

Eric Follows
Eric Follows
25,399 Points
Eric Follows
Eric Follows
25,399 Points

That's great man, thanks...but how did you get the recent-comments.hbs to work? I tried the same format, but it doesn't seem to work for me.

<ul>
    {{#each model as |post|}}
        <li>{{comments.text}}</li>
    {{/each}}
</ul>

When I check it out in the browser, all I see are the bullets without any text...

Michael Kaiser-Nyman
STAFF
Michael Kaiser-Nyman
Treehouse Guest Teacher
Michael Kaiser-Nyman
Michael Kaiser-Nyman
Treehouse Guest Teacher

You'd need to do:

<ul>
    {{#each model as |comment|}}
        <li>{{comment.text}}</li>
    {{/each}}
</ul>

The name between the pipes (|comment|) has to match the name you use in the expression (comment.text).

Eric Follows
Eric Follows
25,399 Points
Eric Follows
Eric Follows
25,399 Points

Nice, that did it. I see my mistake now, thanks!