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! While you're at it, check out some resources Treehouse students have shared here.

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

jadaml
jadaml
11,593 Points
Posted by 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,017 Points
davidkomando
davidkomando
Courses Plus Student 9,017 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.

Alfonso Montano
Alfonso Montano
13,858 Points
Alfonso Montano
Alfonso Montano
13,858 Points

Have you included it in the 

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

?

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

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,017 Points
davidkomando
davidkomando
Courses Plus Student 9,017 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?