Simple ember routing - how to define multiple routes?

0
votes

Ok guys- It really shouldn't get simpler than this. I defined a route named about and added a linkTo about in my template, ran it through the outlet and ember works as expected.

I then added another route called foobars, did the same thing with it and get an uncaught error:

Uncaught Error: assertion failed: The attempt to linkTo route 'foobars' failed. The router did not find 'foobars' in its possible routes: 'about', 'index'

Here's my ember

App = Ember.Application.create()

App.Router.map(function(){
    this.resource('about');
    this.resource('foobars');
});

My drop dead simple html

<body>
<h1>ember</h1>

<script type="text/x-handlebars">
  <h2>application template</h2>
  <a>{{#linkTo 'about'}} about {{/linkTo}}</a>
  <a>{{#linkTo 'foobars'}} foobars {{/linkTo}}</a>
  {{ outlet }}
</script>

<script type="text/x-handlebars" id="about">
  <h2>about template</h2>
</script>

<script type="text/x-handlebars" id="foobars">
  <h2>foobars template</h2>
</script>

Like I said, it works with the about template, so I know my config is ok. I've also tried adding them separately, like so:

App.Router.map(function(){
    this.resource('about');
});

App.Router.map(function(){
    this.resource('foobars');
});

I would expect that defining two routes would not be that much different than defining one route, but I am not seeming to understand something. Could someone point out the error of my understanding? Thanks!

2
ember.js

2 Answers

0
votes

I think you just didn't save your file before reloading your page. I tried your example and it worked well for me.

However when I comment out the foobars route: 

App = Ember.Application.create();

App.Router.map(function() {
  this.resource("about");
  //this.resource("foobars");
});

I got the same exact error in my console:

Error: assertion failed: The attempt to linkTo route 'foobars' failed. The router did not find 'foobars' in its possible routes: 'about', 'index'
-1
votes

You need to define the routes in the form:

App.FoobarsRoute = Ember.Route.extend({
    model: function() {
        return App.Foobars.find();
    }
});

This will typically go in its own file: /routes/foobars_route.js