Skip to content

Instantly share code, notes, and snippets.

@neojp
Created February 24, 2016 22:53
Show Gist options
  • Save neojp/4eec88721fc74c6b705c to your computer and use it in GitHub Desktop.
Save neojp/4eec88721fc74c6b705c to your computer and use it in GitHub Desktop.
link-to nested routes bug
<h1><code>\{{link-to}}</code> nested routes bug</h1>
<p>When using nested routes and the same segment names (eg <code>:slug</code>) in all nested paths, the \{{link-to}} helper doesn't build the right URL.</p>
<h2>Bug Demo:</h2>
<h3>Router:</h3>
<pre>Router.map(function() {
this.route('page', { path: '/page/:slug' }, function() {
this.route('child', { path: '/:slug' });
});
});</pre>
<h3>Template:</h3>
<p>{{link-to "Link to page.child route" "page.child" "about" "team"}}</p>
<pre>\{{link-to "Link to page.child route" "page.child" "about" "team"}}</pre>
<ul>
<li>Expected result:<br><code>https://ember-twiddle.com/page/about/team</code></li>
<li>End result:<br><code>https://ember-twiddle.com/page/<strong>team/team</strong></code></li>
</ul>
<hr>
<h2>Different segment names work though:</h2>
<h3>Router:</h3>
<pre>Router.map(function() {
this.route('newPage', { path: '/new-page/:page_slug' }, function() {
this.route('child', { path: '/:child_slug' });
});
});</pre>
<h3>Template:</h3>
<p>{{link-to "Link to newPage.child route" "newPage.child" "about" "team"}}</p>
<pre>\{{link-to "Link to newPage.child route" "newPage.child" "about" "team"}}</pre>
<ul>
<li>Expected result:<br><code>https://ember-twiddle.com/new-page/about/team</code></li>
<li>End result:<br><code>https://ember-twiddle.com/new-page/about/team</code></li>
</ul>
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none'
});
Router.map(function() {
// this doesn't work
this.route('page', { path: '/page/:slug' }, function() {
this.route('child', { path: '/:slug' });
});
// this does
this.route('newPage', { path: '/new-page/:page_slug' }, function() {
this.route('child', { path: '/:child_slug' });
});
});
export default Router;
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
{
"version": "0.6.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.3.1",
"ember-template-compiler": "2.3.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment