Models, naming, and this

Question

While running through the starter tutorial on EmberJS' site, a few things have me a little confused now.

One thing to note immediately is that I decided to use the ember 1.9.0beta4 with handlebars 2.0.0 instead of 1.8.1 / 1.3.0 included in the starter pack.

First the code included in the screencast:

app.js

App.Router.map(function() {
  this.resource('about');
  this.resource('posts');
  this.resource('post', {path: ':post_id'})
});

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return posts;
  }
});

and

index.html

{{#each model}}
  <tr><td>
    {{#link-to 'post' this}}
      {{title}} <small class='muted'>by {{author.name}}</small>
    {{/link-to}}
  </td></tr>
{{/each}}

This works exactly as expected and the requested post appears when clicked.

However, because I'm using 1.9.0, the preceding code produces a deprecated warning for {{#each}}, telling me to use {{#each foo in bar}} instead. I understand why this appears and agree the verbosity helps show exactly what data is being looped through.

So I change the line {{#each model}} to {{#each post in model}} and every bit of data disappears... I then try to change the code to:

updated index.html

{{#each post in model}}
  <tr><td>
    {{#link-to 'post' this}}
      {{post.title}} <small class='muted'>by {{post.author.name}}</small>
    {{/link-to}}
  </td></tr>
{{/each}}

Great! The title and author's name once again appear for each post. But clicking either post gives me an undefined id. I change {{#link-to 'post' this}} to {{#link-to 'post' this.id}}. Same result. I change it to {{#link-to 'post' post.id}}. The id is now included but when I click the link I get this error:

Error while processing route: post Assertion Failed: You used the dynamic segment
post_id in your route post, but App.Post did not exist and you did not override
your route's `model` hook.

My questions are:

1. What happens internally that forces the post. prefix if I simply include the post in code? To me I should be able to use either this or continue to not need any prefix.

2. After adding post in to the each statement, what happens to this? Why does it no longer refer to the same object?

3. How can models be named to make it easier to categorize? post in model should really be post in posts but I haven't found a way to name the data container.

4. What is causing the error now that I'm no longer referring to the model as this? How can it be remedied?

Answer 1

Your frustration and questions are exactly the reason why the first syntax is deprecated and only the each post in ... form will be supported. Hopefully this answers your questions, and please respond if you need clarification.

1. In your first example where you use each model, the scope of the block changes to a post, meaning this refers to the current post in the loop. When you the form each post in ..., the scope does not change. When it does not change, that means this is actually referring to the previous scope (prior to the loop). In your example, the previous scope is the array controller, not the post object.

2. This is related to question 1. With the each post in ... format, this refers to whatever it was outside of the each block. It's not that something happens to this, it's that something does not happen to this because the scope doesn't change.

3. For better naming I usually setup a property as an alias to the content in the array controller:

   posts: Ember.computed.alias('content')

4. In your original example, when you supply the link-to helper with this, you're passing the full post object. From what you've tried, it looks like this is the one thing you didn't do:

   {#link-to 'post' post}}

Answer 2

I will try to answer your questions in order:

1. When you say {{#each model}} you are looping through the posts (array) in the model, so every time through the loop this is referring to the current post. Therefore when you say {{title}} you are really saying {{this.title}} When you are more explicit by saying {{#each post in model}} then each iteration through the loop is no longer referring to this and instead refers to the variable you made called post

2. Like mentioned in #1 above, this no longer refers to each individual iteration. I understand how you are thinking that perhaps still being able to use this (alongside post) would be convenient, but think about the following scenario. What happens when you have a nested {{#each}}? Would the implicit this refer to the outer array or inner array? If you really don't feel like typing the extra post. you can always use the {{#with post}} handlebars helper that scopes post back to this See the following example here

3. If you have a property in your model or controller, you can absolutely loop through that property as in {{#each color in colors}} See here for a working example

4. Finally, the link-to should be {{#link-to 'post' post}}