emberjs ArrayController doesn't work in template

Question

I am trying out ember.js and I am struggling with rendering an array of items to the template:

index.html

  <script type="text/x-handlebars">
    {{App.test}}
  </script>

  <script type="text/x-handlebars">
    {{#each App.eventsController}}
        <p>{{title}}</p>
    {{/each}}
  </script>

  <!-- le javascript -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</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>

app.js

var App = Em.Application.create({
    test : 'does it work?...'
});

App.Event = Ember.Object.extend({
    title: '',
    body: ''
});

App.eventsController = Ember.ArrayController.create({

    events: [],

    init: function() {

        self = this;
        self.pushObject(App.Event.create({
            title: "Event 1",
            body: "Content"
        }));
    }
});

The first binding (App.test) does work fine. Only my second call does nothing but putting an empty handlebar-script-tag into my DOM.

So what am I missing here?

Ryan · Accepted Answer · 2012-10-02 14:00:09Z

2

If you override init you need to make sure to call this._super so the controller can finish its setup process. Once you do this your code should be working as expected.

init: function() {
    this._super();
    this.get('content').pushObject(App.Event.create({
        title: "Event 1",
        body: "Content"
    }));
}

I've created a jsfiddle for you so you can see it working: http://jsfiddle.net/qKXJt/188/

answered Oct 2, 2012 at 14:00

Ryan

3,5941 gold badge27 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sven Over a year ago

Your code also works without that super call... I will try that in my environment later. Thank you

Joachim H. Skeie · Accepted Answer · 2012-10-01 18:10:14Z

0

You'd want to put your eventsController's data inside the 'content' property:

App.eventsController = Ember.ArrayController.create({
    content: [],

    init: function() {
        this.get('content').pushObject(App.Event.create({
            title: "Event 1",
            body: "Content"
        }));
    }
});

Your template {{#each App.eventsController}} should automatically pick up the changes and display your title.

answered Oct 1, 2012 at 18:10

Joachim H. Skeie

1,90317 silver badges27 bronze badges

4 Comments

Sven Over a year ago

My chrome console says "Uncaught TypeError: Cannot call method 'oushObject' of null". I feel like I am doing something very basic wrong... :-/

Joachim H. Skeie Over a year ago

Might be a silly question, but do you have a statement at the top of app.'s with var App = Ember.Application.create({}); and an App.initialize(); at the end of app.js ?

Sven Over a year ago

I do create the app. I don't initialize it! I tried it and it made no difference. But as far as I know I don't have to initialize it?!

Aras Over a year ago

I think in 1.0pre you have to explicitly call App.initialize(). I am using ember-latest and they have just changed this behaviour again by setting autoinit: true. So in ember-latest right now you no longer need to call initialize()

Collectives™ on Stack Overflow

emberjs ArrayController doesn't work in template

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related