Ember.js dynamic link

Question

I need some information about the {{link-to}} on ember. I've made some test and there is something I really don't understand..

Example :

I have a blog with with different post like that :

App.Router.map(function() {
    this.resource('login', { path: '/' });
    this.resource('home');
    this.resource('posts', function(){
        this.resource('post', { path: '/:post_id' }, function(){
            this.route('update');
        });
    this.route('create');
    });
});

Let's say that I have this template :

<script type="text/x-handlebars" data-template-name="enquiries">
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>type</th>
                <th>name</th>
                <th>last update</th>
                <th>Detail</th>
            </tr>
        </thead>
        <tbody>
        {{#each post in model}}
            <tr>
                <td>{{post.id}}</td>
                <td>{{post.type}}</td>
                <td>{{post.name}}</td>
                <td>{{post.updatedAt}}</td>
                <td>{{#link-to 'post' post}}View{{/link-to}}</td>
            </tr>
        {{/each}}
        </tbody>
    </table>
</script>

My simple post template

<script type="text/x-handlebars" data-template-name="post">
    <div class="post-info">
        <button {{action "update"}}>Update</button>
        <table>
            <tr>
                <td>{{title}}</td>
            </tr>
            <tr>
                <td>{{content}}</td>
            </tr>
            <tr>
                <td>{{author}}</td>
            </tr>
        </table>
    </div>
</script>

Those link a dynamic one and there is on all of them the good url such as localhost/posts/1 or 2 etc...

When I click on the link, nothing happend. I have to had {{oulet}} to show it. but my problem is that its show on the same page as my table (underneath), but I wanted to only display the post template..

I have some trouble to understand why, and also what is the main purpose of the outlet in my case...

Thanks.

Answer 1

The reason the post is shown within the posts template is because your Router defines it that way. If you want a separate page, try this:

App.Router.map(function() {
    this.resource('login', { path: '/' });
    this.resource('home');
    this.resource('posts');
    this.resource('post', { path: 'posts/:post_id' }, function(){
        this.route('update');
    });
    this.route('create');
});

When you have a nested resource, the {{outlet}} helper designates where the nested template will be rendered.