Models, Names and

Question

Looking at the beginner's tutorial on the EmberJS website, some things got me a little confused.

One instant is that I decided to use ember 1.9.0beta4 with 2.0.0 rudders instead of 1.8.1 / 1.3.0 included in the starter pack.

First, the code included in 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 mail appears when clicked.

However, since I'm using 1.9.0, the previous code raises an obsolete warning for {{#each}} , telling me to use {{#each foo in bar}} instead. I understand why this appears and agrees that verbosity helps show exactly what data is looping.

So, I change the line {{#each model}} to {{#each post in model}} and every bit of data disappears ... Then I 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}} 

Excellent! The title and author name reappear for each post. But clicking any of the posts gives me an undefined id . I am changing {{#link-to 'post' this}} to {{#link-to 'post' this.id}} . The same result. I am changing it to {{#link-to 'post' post.id}} . id now enabled, 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 `model` hook. 

My questions:

• What happens inside that forces the post. prefix post. if i just include post in code? For me, I would have to use either this or not need a prefix.

• After adding post in to each statement, what happens to this ? Why is it no longer related to the same object?

• How can models be called to simplify the classification? post in model should really be post in posts , but I did not find a way to name the data container.

• What causes the error now that I no longer treat a model like this ? How can this be fixed?

Answer 1

Your frustrations and questions are exactly why the first syntax is deprecated and only the form each post in ... will be supported. Hope this answers your questions and please answer if you need clarification.

• In the first example, where you use each model , the scope of the block changes to a message, and the value of this refers to the current record in the loop. When you are in the form of each post in ... , the scope does not change. When it does not change, this means that this actually refers to the previous area (before the loop). In your example, the previous scope is an array controller, not a post object.

• This is related to question 1. In the format each post in ... this refers to what was outside the each block. It’s not that something happens to this , it doesn’t happen to this because the scope is not changing.

• For a better name, I usually set the property as an alias for the content in the array controller:

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

• In the original example, when you provide link-to this helper, you are passing the complete post object. From what you tried, it looks like this is the only thing you haven't done:

  {#link-to 'post' post}}

Answer 2

I will try to answer your questions in the order:

• When you say {{#each model}} , you {{#each model}} over the columns (array) in the model, so every time through the this loop refers to the current record. So when you say {{title}} , you really say {{this.title}} . When you are more explicit saying {{#each post in model}} , then each loop iteration no longer refers to this and instead refers to the variable you made with the name post

• As mentioned in # 1 above, this no longer applies to every single iteration. I understand how you think it might still be possible to use this (along with post ), it would be convenient, but think about the following scenario. What happens when you have a nested {{#each}} ? Will an implicit this refer to an external array or internal array? If you really do not like to enter an additional post. , you can always use the helper descriptor {{#with post}} , which binds post to this . See the following example here.

• If you have a property in your model or controller, you can completely skip this property, as in {{#each color in colors}} See here for a working example

• Finally, link-to should be {{#link-to 'post' post}}