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 ObjectController and ArrayController

FYI: Deprecation of how to access properties of individual objects within HandleBar templates within Ember applications.

In case you're using the latest versions of Ember 1.X and cannot link to individual posts or actions associated with individual posts, you must replace the use of this with the name of individual posts you decided to used to start an #each iteration.

For example, if you used {{#each post in posts}} to iterate over each post, to properly now set up a link to an inidividual post you code the following code snippet in place of this.id:

<li>{{#link-to 'post' post.id}}{{post.title}}{{/link-to}}</li>

You must do similar things with any attempt to access properties of an individual post as you iterate through it.

Benjamin Dalton
Benjamin Dalton
10,725 Points

I was stuck on the previous video over this and then made the logical jump to post.id. However, I'm confused why I can't specify 'post in posts' on my #each. Instead I have to do:

{{#each post in model}}

Why doesn't it pick up on "posts"?

Ernest Guaimano
Ernest Guaimano
14,928 Points

Benjamin Dalton So happy that I found your comment. I had the same issue and this was killing me since it wasn't throwing any errors. I'm guessing that post is reserved for a specific use within ember or handlebars.

4 Answers

Nikolay Batrakov
Nikolay Batrakov
9,604 Points

Hi Kevin,

Don't you mind if I ask you a question similar to the issue, you meant here? Inside {{#each}} helper, how should we pass a variable to {{view}}?

Say we have {{#each item in items}} loop. I can easily pass "item" to {{#link-to}} or to {{action}} as a second argument but it just doesn't go in {{view}}. I've tried property binding - it doesn't work either.

Hi, Nikolay Batrakov:

I'm slightly confused by your question. If it's a controller, make sure you're using the appropriate type of controller (ObjectController, ArrayController, and etc.)

If you mean a component, you typically bind the context the following way:

<script type="text/x-handlebars" data-template-name="modelProfilePage">
  {{#each indvidualModel in model }}
    {{model-details supermodel=individualModel}}
{{/each}}
</script>


<script type="components/model-details">
  <h1>{{supermodel.firstName}} {{supermodel.lastName}}</h1>
</script>
Nikolay Batrakov
Nikolay Batrakov
9,604 Points

I'm sorry, I probably shall give a code example. That one is a bit dumb, for education purpose only :)

<script type="text/x-handlebars" data-template-name="index">
  {{#each item in model}}
     <li>{{item}}</li>
     <li>{{view.alertField}}</li>
  {{/each}}
</script>

//in app.js

var view = Ember.View.Create({
  templateName: 'index',
  alertField: 'Click me',
  click: function() {
    alert("Hi!");
  }
});

How can I pass an item to the view to use it as a argument for alert? If I use components, I have no problems at all.

Hello again, Nikolay Batrakov:

You shouldn't have to refer to the variable identifier of the controller of an Ember app that way at all.

You can actually use a view not unlike my component example; it's just that you can use the Ember App's variable identifer to then specify what controller is associated with your use of #view w/ Ember.View:

{{#view 'App.modelDetailView' tag="section"}}

{{/view}}

It's not too unlike the way you refer to regular Ember controller properties after you set things up this way.