Ember.js не работает должным образом

В настоящее время я изучаю ember.js, и у меня возникла очень простая проблема: я не могу найти способ сделать шаблон внутри другого с помощью точек. Это файлы, которые у меня есть:

application.handlebar

<div class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
    <div class='navbar-inner'>
        <div class='container'>
            <a class="brand" href="#">App</a>
            <div class='nav-collapse collapse'>
                <ul class='nav'>
                    <li>{{#linkTo 'application'}}Home{{/linkTo}}</li>
                    <li>{{#linkTo 'posts'}}Posts{{/linkTo}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class='container' id='main'>
    <div class='content'>
        <div class='row'>
            <div class='span12'>
                <div class='page-header'></div>
                {{outlet}}
            </div>
        </div>
    </div>
</div>
</div>

posts.handlebars:

    <ul>
{{#each controller}}
  <li>
  {{title}}
  </li>
{{/each}}
</ul>

posts_routes:

App.PostsRoute = Ember.Route.extend({
    model: function() {

       return App.Post.find();
    }
});

router.js:

App.Router.map(function() {
    this.route('posts',{ path: '/posts' }); 
    this.route('application',{ path: '/' }); 
});

Вот что происходит: при загрузке приложения страница отображается в настоящее время с помощью навигационной панели и пустой белой страницы. Нажав на ссылку "Сообщения", вы увидите шаблон сообщений, но навигация исчезнет, как если бы шаблон замещения заменил весь шаблон приложения. Можете ли вы помочь мне понять, почему это происходит?