Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by james white
james white
78,399 Points

EmberJS Challenge: Application Template

Link to challeneg: http://teamtreehouse.com/library/emberjs/routes-and-templates/challenge-application-template

Challenge Task 1 of 1

In index.html, there are two templates, "kittens" and "puppies". They have a lot of duplicate code, though. Move the duplicated code into the application template, but be sure to leave the <h1> and <p> tags in the "puppies" and "kittens" templates. Ensure that the application template renders the nested resources.

I honestly have no idea what we're supposed to be doing in this challenge?!

I watched the video several times: http://teamtreehouse.com/library/emberjs/routes-and-templates/the-application-template-summary

In the video they're making a separate file, but this challeneg says not to make a separate file but to do the pasting into an already existing file?

Huh? What? :grimacing: :confused:

Anyway, I spent all day randomly pasting things and switching things around until I arrived at:

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

  <!-- THIS IS THE APPLICATION TEMPLATE. -->
  <script type="text/x-handlebars">

    <div class='container'>
      <nav class='navbar navbar-default' role='navigation'>
        <ul class='nav navbar-nav'>
          <li>{{#link-to 'kittens'}}Kittens{{/link-to}}</li>
          <li>{{#link-to 'puppies'}}Puppies{{/link-to}}</li>
        </ul>
      </nav>

      {{outlet}}
      </div>

  </script>

  <script type="text/x-handlebars" id="kittens">
      <h1>Kittens</h1>
       <p>Look at these kittens! They are so cute.</p>
      <h1>Puppies</h1>
       <p>These puppies will love you and snuggle you until your heart melts.</p>
  </script>

  <script type="text/x-handlebars" id="puppies">
      <h1>Puppies</h1>
      <p>These puppies will love you and snuggle you until your heart melts.</p>
  </script>

</body>
</html>

Yes, it finally passed, but don't ask me what I did or why?

It's all just "magic code" stuff. alt text

2 Answers

Ian VanSchooten
Ian VanSchooten
3,549 Points
Ian VanSchooten
Ian VanSchooten
3,549 Points

I'm just a beginner in Ember, but here's what I think is happening:

You can think of the different <script type="text/x-handlebars"> sections as different template files.

The challenge is about combining two separate and somewhat redundant template files into a common template file which includes an {{outlet}} which will pull in two other nested templates, in this case kittens and puppies.

The top-level template also contains links such as {{#link-to 'kittens'}} which reference the routes for those two nested template files. The routes are defined as resources in the js/app.js file.

And indeed, because these pieces are all named carefully, Ember "magically" knows how to associate the routes and templates.

Does that help at all?

james white
james white
78,399 Points
james white
james white
78,399 Points

Thanks Ian, that was a better way of thinking about the EmberJS "techno-magic"..