Question

Today I was reading Trek’s tutorial for the fourth time, hoping that I would get it this time (don’t get me wrong, it is an awesome resource, but I am new to client side development in general and find that tutorial geared more toward experts). Anyway, I noticed this block of code:

<script type="text/x-handlebars" data-template-name="contributors">
  {{#each person in controller}}
    {{person.login}}
  {{/each}}
</script>

It seems obvious that here we iterate trough items in controller and refer to them as person inside each iteration. But where does the controller reference come from? Is this some special keyword that is defined by Ember and made available in the context of each view?

If controller is a special reference made available by Ember, I would like to know more about how it works. Can you point me to documentation or even Ember source where such keywords are defined so that I can learn what other references are available from inside a view and how do they work?

Answer 1

No, it’s not a special keyword, it’s just a property of the view which is set when using the connectOutlet method described below:

index: Ember.Route.extend({
  route: '/',
  connectOutlets: function(router){
    router.get('applicationController').connectOutlet('allContributors', [
      {login:'wycats'},
      {login:'tomdale'}
    ]);
  }
})

If you read below your example, you see:

Controllers have the ability to connect outlets in the views they control. In the above example, I’m calling connectOutlet with ‘allContributors’ as an argument. This will create an instance of AllContributorsView for us, set the shared instance of AllContributorsController as the view’s default rendering context, and insert it into our view hierarchy at the point where {{outlet}} appears in the application template. The second argument, which I’ve hard coded as an array of two object literals, is set as the content of the controller instance.

So the connectOutlet method:

• Create an instance of AllContributorsView
• Set the AllContributorsController as the view’s default rendering context (it means that the controller property of the view is set to App.router.allContributorsController, because the default view rendering context is its controller, or its parent view context when no controller is set, see the view context source code.
• Insert the view where the {{outlet}} appears
• Set the content of the AllContributorsController instance (here [{login:'wycats'}, ...])

I suggest you to read entirely the article and then try to do it yourself.
There are also a lot of Ember resource you could read, see this StackOverflow answer.