StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>One great way to help debugging router issues is to turn on the router logging:</p> <pre><code>window.App = Em.Application.create({ LOG_TRANSITIONS: true }); </code></pre> <p>This lets you see which route you are transitioning into. In your case, when navigating to the comments section it shows:</p> <pre><code>Transitioned into 'posts.index' Transitioned into 'posts.post.show' Transitioned into 'posts.post.comments' </code></pre> <p>This means that your <code>post.show</code> route is not active when you transition to the <code>comments</code> route, which is why you can't render into its <code>{{outlet}}</code>.</p> <p>Since you are not using the <code>post</code> template for any actual content you can rename your <code>post/show</code> template to <code>post</code> and get rid of the <code>show</code> route. This makes sure that template is still around when you want to insert the <code>comment</code> or <code>trackback</code> template.</p> <pre><code>App.Router.map(function () { this.resource('posts', function () { this.resource('post', { 'path': '/:post_id' }, function () { this.resource('comments'); this.resource('trackbacks'); }); }); }); </code></pre> <p>Since you changed the template from <code>post/show</code> to <code>post</code> the <code>postController</code> will contain the post passed from <code>posts</code>, so you can drop the <code>controllers.post</code> and access the properties of the post directly:</p> <pre><code><script type="text/x-handlebars" data-template-name="post"> ... <h3>{{title}}</h3> <p>{{description}}</p> .... </script> </code></pre> <p>Now all you have to do is update the targeted route to render into, which is now just <code>post</code>:</p> <pre><code>renderTemplate: function () { this.render({ into: 'post' }); } </code></pre> <p><a href="http://jsfiddle.net/SM5VM/21/" rel="nofollow">Working JSFiddle</a></p> <p><strong>Update</strong></p> <p>You can have the <code>show</code> route render into <code>posts</code> route which will replace the <code>post</code> template with your <code>post/edit</code> template:</p> <p><a href="http://jsfiddle.net/SM5VM/25/" rel="nofollow">Updated JSFiddle</a></p> <pre><code>App.Router.map(function () { this.resource('posts', function () { this.resource('post', { 'path': '/:post_id' }, function () { this.route('edit'); this.resource('comments'); this.resource('trackbacks'); }); }); }); App.PostEditRoute = Ember.Route.extend({ renderTemplate: function() { this.render({into: 'posts'}); } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload