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 Ember.js Routes and Templates Basic Routes and Templates

jadaml
jadaml
11,593 Points

Blank screen for /#/posts

I'm not seeing anything at /#/posts like is show in the video at this point.

My router has this:

Blogger.Router.map(function() { this.resource('posts'); });

This is in the head of my index.html:

<script src="blogger.js"></script> <script src="router.js"></script>

<script> EmberHandlebarsLoader.loadTemplates(['posts']); </script>

My template has its html, the file names are the same as written above.

What am I missing?

4 Answers

davidkomando
PLUS
davidkomando
Courses Plus Student 9,015 Points

I am having the same issue as the original poster.

  1. The page is blank.
  2. I have verified that I'm using the suggested answers from the two posters above.
  3. In the console I can see that both templates load into the index.html but it looks like it's not getting attached to anything.
DEBUG: -------------------------------
DEBUG: Ember      : 1.7.0
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery     : 1.11.1
DEBUG: -------------------------------
GET http://web-myWorkSpace.treehouse-app.com/templates/posts.hbs    200 OK 51ms 
GET http://web-myWorkSpace.treehouse-app.com/templates/about.hbs   200 OK  50ms

When I expand the GET's I do see the full template.

Is this just me, is there something wrong with the tutorial or were there some kind of browser security updates? Any suggestions?

Also, to top it all off "File -> Preview Workspace" does not exist on the PC version of Chrome or Firefox. I was still able to access my workspace but it was way more manual.

Have you included it in the

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

?

Make sure the code you included in your question is within script tags, without a src attribute (I'm assuming it's HTML5):

<script>
  EmberHandlebarsLoader.loadTemplates(['posts']);
</script>

Also, check in DevTools or similar to make sure all of the other JS files are loaded correctly.

If you're still having trouble, can you check the console when you load the URL, and perhaps even include the full URL you're loading?

davidkomando
PLUS
davidkomando
Courses Plus Student 9,015 Points

I just was able to have the templates display (So my question above is answered). However, I re-watched this video and I never saw a step referencing where Ember is told where to display the templates on the index.html page.

Originally we had these lines in the index.html (from a previous video)

<script type="text/x-handlebars" data-template-name="application"> <h1>I'm a Handlebars template.</h1> </script>

To get something to display I had to change the above to the following

<script type="text/x-handlebars" data-template-name="EmberHandlebarsLoader"> <h1>I'm a Handlebars template.</h1> </script>

Did I miss the step where this was added in this video or a previous video and is this even the correct solution?