CODEWITHSUNDEEP
javascriptember.js
Pio
Pio

Reputation: 4064

Simple Ember controller no output

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>

Upvotes: 0

Views: 158

Answers (2)

Patrick Hammer
Patrick Hammer

Reputation: 1172

Looks like there are some typos in your template definition:

data-templamte-name => data-template-name

Upvotes: 1

Mike Grassotti
Mike Grassotti

Reputation: 19050

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

Upvotes: 2

Related Questions