Basic tutorial doesn't work

Design
1

Hi guys,

I’m newbie to ember.js, so in order to learn the basic grasp, I was trying to follow the video tutorial at the ember.js website. But I’m stuck at the defining the basic route to the template…

My App.js:

App = Ember.Application.create();

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

My about template in the index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
 
<meta charset=utf-8 />
<title>Ember Guide Example</title>
</head>
<body>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.2.0.js"></script>
<script src="js/app.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>

<script type="text/x-handlebars">
  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">Bloggr</a>
      <ul class="nav">
        <li><a href="#">Posts</a></li>
        <li><a>About</a></li>
      </ul>
    </div>
  </div>

  {{outlet}}
</script>

<script type="text/x-handlerbars" id="about">
	<div class="about">
		<p>Yehuda Katz is a member of the <a href="http://emberjs.com">Ember.js</a>,
		<a href="http://rubyonrails.org">Ruby on Rails</a> and
		<a href="http://www.jquery.com">jQuery</a>
		Core Teams; he spends his daytime hours at the startup he founded,
		<a href="http://www.tilde.io">Tilde Inc.</a></p>
	</div>
</script>
 
</body>
</html>

Problem is when I change the URL to display the about template,

file:///C:/javatests/emberjs/starter-kit-1.2.0/index.html#/about

nothing happens. I addition, If I open the ember.js inspector I don’t see my about template in the view tree, but I don’t understand why.

Yes, I have defined {{outlet}} in the application template.

Can you please tell me what’s wrong with my code…thanks in advance

Tomas.

2

Sorry…

Stupid typo, I wrote x-handlerbars…instead of x-handlebars…

I apologize…

3

Hello,

I’m fairly certain you should be using the “link-to” format for handlebars instead of the traditional

    • that you have going on your nav. Try something like this:

  • {{#link-to 'Posts'}}Posts{{/link-to}}
  • {{#link-to 'About'}}About{{/link-to}}

    • Then as long as you have things properly configured in your router.js:

    App.Router.map(function() { this.rout(‘Posts’, { path: “/Posts”}); this.rout(‘About’, { path: “/About”}); });

    Ember should create those other .hbs templates if you haven’t done so already… Hope this helps.