CODEWITHSUNDEEP
ember.js
Andrew
Andrew

Reputation: 6394

Ember.js: Handlebars displays nothing

/app.js    
var Welcome = Ember.Application.create({});

Welcome.person = Ember.View.extend({
    personName: 'Andrew'
});

Here is the content of the index.html, part of the view: 

/index.html
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type="text/x-handlebars">
  {{personName}}
</script>

<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

My question is why isn't it displaying anything? Shouldn't it render the content of personName?

UPDATE:

I am using the Starter Kit from Ember. It already has a view defined. I just added one more property to the object but still it is not visible to the view. 

App.MyView = Em.View.extend({
  mouseDown: function() {
    window.alert("hello world!");
  },
  name: 'Andrew'
});

And the view part in .html is: 

<script type="text/x-handlebars">
    {{#view App.MyView}}
      <h1>Hello world {{name}}!</h1>
    {{/view}}
  </script>

Since the event works, isn't the name supposed to be accessible?

Upvotes: 2

Views: 1670

Answers (1)

sly7_7
sly7_7

Reputation: 12011

Since 1.0, the views preserve their context.

VIEW CONTEXT CHANGES

In apps built on earlier version of Ember (before 1.0), the {{#view}} helper
created a new context for the view. This meant that you had to explicitly set the
context on them.

In 1.0, we've  made this a bit simpler. The {{#view}} helper no longer changes
the context, instead  maintaining the parent context by default. Alternatively,
we will use the controller  property if provided. You may also choose to directly
overridethe context property. The order is as follows:

Specified controller
Supplied context (usually by Handlebars)
parentView's context (for a child of a ContainerView)
In the event that you do need to directly refer to a property on the view, you
can use the view keyword, i.e. {{view.myProp}}.


So, for your example, tou have to use {{view.name}}

<script type="text/x-handlebars">
  {{#view App.MyView}}
    <h1>Hello world {{view.name}}!</h1>
  {{/view}}
</script>

Upvotes: 6

Related Questions