Question

I’m new to Ember and Handlebars.
I am trying to create a table with a dynamic content.
I add the code into jsfiddle

I have the following code:

<script type="text/x-handlebars">
<table border="1" bordercolor="FFCC00" style="background-color:FFFFCC" width="400" cellpadding="3" cellspacing="3">
  {{#each Table.tableController}}
  <tbody>
<tr>
    <td width ="30%">{{title}}</td>
    <td width ="30%">{{artist}}</td>
            <td width ="40%">{{genre}}</td>
</tr>
   </tbody>
  {{/each}}
</table>

A simple table binding a content from my controller.

And here is my controller and application:

Table = Ember.Application.create({});

Table.Cell = Ember.Object.extend({
title: null,
artist: null,
genre: null,
listens: 0
});

Table.tableController = Ember.ArrayProxy.create({
content: [],
init: function() {
    var data = Table.Cell.create({
    title: 'Ruby',
    artist: 'Kaiser Chiefs',
    genre: 'Indie Rock',
        });
    this.pushObject(data);
    data = Table.Cell.create({
    title: 'Somebody Told Me',
    artist: 'Killers',
    genre: 'Indie Rock',
        });
        this.pushObject(data);
    },
    createSong: function(title, artist, genre) {
    var cell = Table.Cell.create({
    title: title,
    artist: artist,
    genre: genre,
        });
    this.pushObject(cell);
    },
});

That’s working just fine.

Now I want to add a new song, and I am doing this via Chrome console with the following line:

 Table.tableController.createSong('Feiticeira', 'Deftones', 'Alternative');

I can verify that a new Object is created and inserted into my content array.
But there is no changes into my table.

What am I doing wrong?
Why my table is not creating a new content?

I pushed this code into jsfiddle to get help you help me.
Here’s the link to the code again.

Answer 1

UPDATED ANALYSIS

You forgot calling this._super(); in the init, which prevented your instance to have its binding management setup. (Fixed revision)

You felt in a typical Ember gotcha: initial values should never be objects, as they would be shared by all class instances… See this article for more informations.

FIX SAMPLE – Still recommended implementation

Updated your JSFiddle @ http://jsfiddle.net/MikeAski/AgyAk/12/ with a few improvements (The most notable: make use of a controller rather than directly ArrayProxy. It is more idiomatic and ready to switch to Router infrastructure).