What's its use of the outlet

Hi every body, i am a newer in user ember.js. I am reading the official documentation. I didn’t understand What’s its use of the outlet. Can someone can explain it to me please? Thanks.

The outlet is the location within the template within which a “deeper” template is rendered. So, if you have an application template that includes the html for the general layout of your app, the location of the {{outlet}} in that template is where the more specific parts of your app (the routes) will be rendered within that layout. The templates for your routes can, in turn, also have an outlet if that route itself has a nested route.

Let’s say your app displayed lists of books or movies, and the user can click on a title to view details of a specific book or movie. Your routes would probably look something like this:

application

  • books [list books]

    • book [details for a specific book]
  • movies [list movies]

    • movie [movie details]

The templates for the books & movies routes would be rendered where the {{outlet}} in the application template is located. Each of those templates could have very different html, but both lists would be wrapped by the same html in the application template.

Each of those lists could in turn have their own {{outlet}} into which their respective details routes (book & movie) templates would be rendered.

(Or they could replace the lists entirely but that’s another story.)

Have a look here for some more examples. Keep in mind this post is a bit old so there may be some outdated info.

2 Likes