3
votes

I have a route in an Ember app called "basic" corresponding to the name of an API endpoint.

This route doesn't work - links to it don't render its template.

Here's a JSBin demonstrating the failure: http://emberjs.jsbin.com/hisoxadi/1

JS:

App = Ember.Application.create();

App.Router.map(function() {
  this.route('basic');
  this.route('test');
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

Templates:

  <script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{#link-to 'index'}}Index{{/link-to}}

    {{#link-to 'basic'}}Basic Route{{/link-to}}

    {{#link-to 'test'}}Test Route{{/link-to}}

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="basic">
  basic route is here
  </script>

  <script type="text/x-handlebars" data-template-name="test">
  test route is here
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
  </script>
1
Looking through Ember's source I can see that basic is referred to all over the place. It should probably be in the documentation that 'basic' is essentially a reserved keyword when talking about routes.bcmcfc
So annoying! Good find man, just spent an hour trying to figure this out.Mike Mellor

1 Answers

3
votes

To expand on your comment a bit, basic is indeed a reserved word. Specifically, it's a reserved word for the resolver. You can see the source here.

useRouterNaming: function(parsedName) {
  parsedName.name = parsedName.name.replace(/\./g, '_');
  if (parsedName.name === 'basic') {
      parsedName.name = '';
  }
},

And because of the way that Ember.js sometimes looks up routes and controllers in the container, it's a fair bet to say that there's no way around this without major code changes. There should probably be a documentation issue filed for this.

EDIT: I created an issue for this here.