EmbersJS Nested routes

Question

Link to challenge: http://teamtreehouse.com/library/emberjs/routes-and-templates/challenge-nested-routes

Challenge Task 1 of 2

Modify this router so that the puppies route is nested within the dogs route.

I hate the fact that this EmberJS course is new there aren't a lot of forum threads to help out with the challenges.

This is what you are given as started code:

AnimalShelter = Ember.Application.create();

AnimalShelter.Router.map(function() {
  this.resource('dogs');
  this.resource('puppies');
  this.resource('cats');
});

AnimalShelter.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('dogs');
  }
});

I figured maybe the routing has to do something with the IndexRoute, so I tried:

AnimalShelter = Ember.Application.create();

AnimalShelter.Router.map(function() {
  this.resource('dogs');
  this.resource('puppies');
  this.resource('cats');
});

AnimalShelter.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('dogs');
  }
});

Got a Bummer! with no hint...which means probably far off.

Did some googling and found this: http://ugisozols.com/blog/2013/11/05/understanding-nesting-in-emberjs/

..which had this code:

App.Router.map(function() {

  this.resource("entries", function() {
    this.route("new");
  });
});

Okay, that means I should probably be working with 'Router.map(function()'

so let's try:

AnimalShelter.Router.map(function() {
  this.resource('dogs', function(){
      this.route('puppies');
       });

..which gave me:

Bummer! Your callback for the map() function needs to set up a 'puppies' resource.

Hmmm...based on that Bummer feedback, maybe try this:

AnimalShelter = Ember.Application.create();

AnimalShelter.Router.map(function() {
  this.resource('dogs', function(){
      this.resource('puppies');
       });
  this.resource('cats');
});

AnimalShelter.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('dogs');
  }
});

..and it passed (without having to watch the video a bunch of times)

On to the next part of the challenge:

Challenge Task 2 of 2

At the end of the "dogs" template, add the {{outlet}} helper to display the nested route.

The dogs template?

I don't see any file called template.html, just index.html...so let's work with that.

Wow, too much stuff in that file:

<!DOCTYPE html>
<html>
<head>
  <title>Animal Shelter</title>
</head>
<body>
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-1.8.1.js"></script>
  <script src="js/app.js"></script>

  <script type="text/x-handlebars" id="dogs">
    <h1>Dogs</h1>
    <p>We have lots of wonderful dogs available for adoption at the animal shelter!</p>
  </script>

  <script type="text/x-handlebars" id="puppies">
    <p>We have so many cute {{#link-to 'puppies'}}puppies{{/link-to}}!</p>
  </script>

</body>
</html>

It's probably (hopefully) as simple as pasting in '{{outlet}}' somewhere, but where?

Let's try in under the script section to do with dogs...put it on the end after the paragraph tags:

<!DOCTYPE html>
<html>
<head>
  <title>Animal Shelter</title>
</head>
<body>
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-1.8.1.js"></script>
  <script src="js/app.js"></script>

  <script type="text/x-handlebars" id="dogs">
    <h1>Dogs</h1>
    <p>We have lots of wonderful dogs available for adoption at the animal shelter!</p>
  </script>

  <script type="text/x-handlebars" id="puppies">
    <p>We have so many cute {{#link-to 'puppies'}}puppies{{/link-to}}!</p>
    {{outlet}}
  </script>

</body>
</html>

Bingo! It passed!

Now on to the next challenge that has something to do with Application Templates..sounds complicated...

Answer 1 · 2015-03-26T03:51:38Z

March 26, 2015 3:51am

Hey James, it seems or second challenge code does not work so I came up with this:

<!DOCTYPE html>
<html>
<head>
  <title>Animal Shelter</title>
</head>
<body>
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-1.8.1.js"></script>
  <script src="js/app.js"></script>

  <script type="text/x-handlebars" id="dogs">
    <h1>Dogs</h1>
    <p>We have lots of wonderful dogs available for adoption at the animal shelter!</p>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="puppies">
    <p>We have so many cute {{#link-to 'puppies'}}puppies{{/link-to}}!</p>
    {{outlet}}
  </script>

</body>
</html>

Answer 2 · 2016-01-03T12:57:28Z

January 3, 2016 12:57pm

AnimalShelter = Ember.Application.create();

AnimalShelter.Router.map(function() {
  this.resource('dogs', function() {
     this.resource('puppies');
  });
  this.resource('cats');
});

AnimalShelter.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('dogs');
  }
});

Answer 3 · 2016-01-03T13:00:18Z

January 3, 2016 1:00pm

<!DOCTYPE html>
<html>
<head>
  <title>Animal Shelter</title>
</head>
<body>
  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-1.8.1.js"></script>
  <script src="js/app.js"></script>

  <script type="text/x-handlebars" id="dogs">
    <h1>Dogs</h1>
    <p>We have lots of wonderful dogs available for adoption at the animal shelter!</p>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="puppies">
    <p>We have so many cute {{#link-to 'puppies'}}puppies{{/link-to}}!</p>
  </script>

</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

james white

james white

EmbersJS Nested routes

3 Answers

Devin Scheu

Devin Scheu

Johnny Romano

Johnny Romano

Johnny Romano

Johnny Romano