Emberjs routing guide: what does '↳' represent?

1

From the emberjs docs :

App.Router.map(function() {
  this.resource('posts', function() {
    this.route('new');
  });
});

This router creates three routes:

URL Route Name Controller Route Template
/ index IndexController IndexRoute index
N/A posts1 PostsController PostsRoute posts
/posts posts.index PostsController
↳PostsIndexController 		PostsRoute
↳PostsIndexRoute 		posts
↳posts/index
/posts/new posts.new PostsController
↳PostsNewController 		PostsRoute
↳PostsNewRoute 		posts
↳posts/new



What do those ‘↳’ represent in that table?

2

I think they are just trying to indicate nesting.

In other words the PostsIndexController is “nested” under the PostsController

edit: I had it backwards meant to say PostsIndex nested under Posts.

3

What is meant by nesting a controller under another controller?
I mean, how will it look in code? Aren’t they defined as separate controller objects?

4

Here is a basic example

http://jsbin.com/uMIsAxO/1/edit

The post template is nested within a posts template, via the {{ outlet }} helper.

<ul>
  {{#each}}
    <li>{{#linkTo "posts.post" id }} View Post {{ id }}  {{title}} by {{author}} {{/linkTo}}</li>
  {{/each}}
</ul> 
<hr />
{{ outlet }}

The controllers are automatically generated for you by Ember if you use the default behavior. However you customize them you need to create the controllers.

For posts use and “ArrayController” because that is a collection of items and for post use an “ObjectController” because that is a single instance.

Here is another example where the Controllers are defined. Make note of the foo variable.

http://jsbin.com/irIZEgU/1/edit

Hope this helps.

5

@eccegordo That helps a lot!

So, what I get is that the properties defined in the controller corresponding to a parent route are available to the controller corresponding to child route.

So, if I am correct, the child controller object inherits from parent controller object.

6

Also, for some reason if I copy the contents of your jsbin example to local files and view it in browser, I don’t see the contents of post when I click the corresponding link.
Don’t see any errors in console, though.

Any idea why that might be?

7

Not quite exactly like that. I have posted an updated version with some styling so you can see the nesting.

Edit Note: Updated example links above to new revision to fix minor bug and use ember and ember-data latest.

Also, I have explicitly defined two variables

foo

and

bar

in every route and controller. The variables are defined in every context but they are expressed in a single template called “_variables”. This is a partial and it is rendered in the templates. I include this partial in all the other templates.

By definition a partial is just template code defined in one place and inherits the values or whatever controller and context it is in.

To better understand what is going on with the foo and bar variables you should read the section of the guide that talks about coupling of data.

I would also encourage you to play around with them and change the values and see it does what you expect. You could change the value of them or even comment them out in some controllers or routes. Then you can see what inheritance is really going on.

http://emberjs.com/guides/controllers/#toc_a-note-on-coupling

A NOTE ON COUPLING

In Ember.js, templates get their properties from controllers, which decorate a model.

This means that templates know about controllers and controllers know about models, but the reverse is not true. A model knows nothing about which (if any) controllers are decorating it, and controller does not know which views are presenting its properties.

Basically the template gets properties from the controller. The controller is created when the application starts up and lives for a long time. The routes, model data and templates all change and as this happens various properties of the controller get updated.

The router is really mostly about state of the application. The router is responsible for managing the URLs in your application and it is responsible for fetching the model data and setting up or manipulating the specific controllers when you change urls and states in your application.

The router is backed by a state machine and therefore this is where you put the logic to transition between different parts of your application.

On the nesting of templates look at the code example. I have tried to wrap every outlet and logical segment of template code so you can see the nesting of templates. It is using twitter bootstrap styles.

I also created a non-nest “altpost”, so you can see the effect of not nesting. Note that this loads the same data as posts, but it is just a different router, controller and template.

8

Thanks for those examples! I think I now understand routing and nesting better!