Ember.js出口无法正常工作

Question

I'm currently learning ember.js and I'm stuck with a very basic problem: I can't find a way to render a template inside another one using outlets. These are the files I have:

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: '/' }); 
});

Here is what happens: when I load the application, the page is currently displayed with the nav bar and an empty white page. Clicking the "Posts" link shows the posts template, but the nav disappear as if the posts template replaced the whole "application" template. Can you help me figure out why this happens?

Answer 1

Internally ember use an ApplicationRoute , I think that using this.route('application',{ path: '/' }); is causing conflict.

So just remove the this.route('application',{ path: '/' }); and all will work.

If you need a home/initial page you can create a index.handlebars template, because ember automatically create a this.route('index',{ path: '/' }); . And change linkTo 'application' to linkTo 'index' , to get the expected behavior.

Please give a look in that fiddle to see this working http://jsfiddle.net/marciojunior/HpmwB/