How does Discourse's login modal work?

When I view “Ember.JS” in browser address, it will auto goto “” and open the login modal.

This is my template, and router.

<ul class="nav-list">
  <li class="nav-item">{{#link-to 'index' class="pure-button"}}{{t blog.home}}{{/link-to}}</li>
  <li class="nav-item">{{#link-to 'posts' class="pure-button"}}{{t blog.posts}}{{/link-to}}</li>
  <li class="nav-item"><a class="pure-button" {{action login}}>{{t button.login}}</a></li>
<div>{{outlet}}</div> {
  this.resource('posts', { path: '/posts' })

When I click “posts” button, “outlet” will render by postsView; When I click “login” button, “outlet” will render by loginView, but I want do this like Discourse.

How do I write the Handlebars template or How to define the router?

I had found a guide an “