Simple Ember controller no output

Question

I started to work with Ember, though I am new to functional programming, JS and Ember also. I followed some tutorials and I decided to try to display one variable from a controller in a view. Correct me if I understood wrong, but the view gets as context the controller and it is rendered within the handlebars template language. The above code does runs without any problems, just the name is not displayed, jut the plain text from the loginState template.

//app.js
App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});


App.ApplicationController = Ember.Controller.extend();

App.LoginStateView = Ember.View.extend({
  templateName: 'loginState'
});

App.LoginStateController = Ember.Controller.extend({
   name: 'Juriy'
});

App.Router = Ember.Router.extend({
   root: Ember.Route.extend({
   index: Ember.Route.extend({
     route: '/',
     connectOutlets: function(router){
     router.get('applicationController').connectOutlet('loginState');
     }
   })
 })
});

and

//index.html
<body>

<script type="text/x-handlebars" data-templamte-name="application">
          My login page.
          {{outlet}}
    </script>

    <script type="text/x-handlebars" data-templamte-name="loginState">
          The name in the login state is {{name}}
    </script>

</body>

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-01-19T16:17:51

TLDR: It's because of a typo. Replace data-templamte-name with data-template-name for both of your templates and things should work.

To debug this problem, I added the following near the top of each template:

  <pre>The context for application is: {{this}}</pre>  
  <pre>The context for loginState is: {{this}}</pre>

With this addition I got the following output:

The context for loginState is: <App.ApplicationController:ember194>
The name in the login state is

So application template is rendering at all, and loginState is being rendered in context of application-controller. It's as if the templates were not named correctly....

Simple Ember controller no output

2 Answers