# Emberjs routing guide: what does '↳' represent?

**URL:** <https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197>\
**Category:** Uncategorized\
**Created:** [August 17, 2013, 9:59am UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197 "2013-08-17T09:59:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jatin](https://avatars.discourse-cdn.com/v4/letter/j/f04885/32.png) [@jatin](https://discuss.emberjs.com/u/jatin)\
**Post date:** [August 17, 2013, 9:59am UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197/1 "2013-08-17T09:59:02Z")

</div>

From the emberjs [docs](http://emberjs.com/guides/routing/defining-your-routes/) :

```javascript
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 | `posts`1 | `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?

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [August 17, 2013, 10:05am UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197/2 "2013-08-17T10:05:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jatin](https://avatars.discourse-cdn.com/v4/letter/j/f04885/32.png) [@jatin](https://discuss.emberjs.com/u/jatin)\
**Post date:** [August 17, 2013, 10:21am UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197/3 "2013-08-17T10:21:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [August 17, 2013, 12:05pm UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197/4 "2013-08-17T12:05:56Z")

</div>

Here is a basic example

[http://jsbin.com/uMIsAxO/1/edit](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](http://jsbin.com/irIZEgU/1/edit)

Hope this helps.

---

<div class="post-metadata">

**Author:** ![jatin](https://avatars.discourse-cdn.com/v4/letter/j/f04885/32.png) [@jatin](https://discuss.emberjs.com/u/jatin)\
**Post date:** [August 17, 2013, 1:03pm UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197/5 "2013-08-17T13:03:08Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![jatin](https://avatars.discourse-cdn.com/v4/letter/j/f04885/32.png) [@jatin](https://discuss.emberjs.com/u/jatin)\
**Post date:** [August 17, 2013, 1:07pm UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197/6 "2013-08-17T13:07:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![eccegordo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/eccegordo/32/14927_2.png) [@eccegordo](https://discuss.emberjs.com/u/eccegordo)\
**Post date:** [August 17, 2013, 9:20pm UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197/7 "2013-08-17T21:20:33Z")

</div>

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

> **[Ember Nesting Example](http://output.jsbin.com/AYoganE/9/)**
>
> Minimalist Ember JSBin

> **[JS Bin](http://jsbin.com/AYoganE/9/edit)**
>
> A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

**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](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.

---

<div class="post-metadata">

**Author:** ![jatin](https://avatars.discourse-cdn.com/v4/letter/j/f04885/32.png) [@jatin](https://discuss.emberjs.com/u/jatin)\
**Post date:** [August 19, 2013, 10:42am UTC](https://discuss.emberjs.com/t/emberjs-routing-guide-what-does-represent/2197/8 "2013-08-19T10:42:55Z")

</div>

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