CODEWITHSUNDEEP
ember.js
Sven
Sven

Reputation: 6338

emberjs ArrayController doesn't work in template

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?

Upvotes: 1

Views: 236

Answers (2)

Ryan
Ryan

Reputation: 3594

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/

Upvotes: 2

Joachim H. Skeie
Joachim H. Skeie

Reputation: 1903

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.

Upvotes: 0

Related Questions