Question

I’m having my first play around with Ember.js, and am falling at the first hurdle. Been trying for ages to get this to work, but I keep getting the error “Cannot call method ‘extend’ of undefined “

In my HTML I have this:

<script type="text/x-handlebars">
    {{#view App.MainView}}
      <div class="hero-unit">
        <h1>{{blogTitle}}</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non neque a eros dapibus posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    {{/view}}
  </script>

And in my JS I have this:

var App = Ember.Application.create();

//define main view
App.MainView = Ember.View.extend({
    blogTitle: 'Epic Blog'
});

According to the docs, this should just render the template fine, but no matter hoe hard I try I get the error…

Anyone know what I’m doing wrong?

Answer 1

What Ember.js version are you using? I’ve created a JSFiddle with your code using Ember.js 0.9.8.1 and it works, see http://jsfiddle.net/pangratz666/D3VuA/.

Also, you have to declare App as global variable by omitting the var. This is needed so bindings and paths in the templates work:

App = Ember.Application.create();
...