Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

EmbersJS Nested routes

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) :thumbsup:


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...

3 Answers

Devin Scheu
Devin Scheu
66,191 Points

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>
Johnny Romano
Johnny Romano
32,517 Points
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');
  }
});
Johnny Romano
Johnny Romano
32,517 Points
<!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>