Ember-Table with Fixture Adapter

Question

I am trying to load an ember table using Ember-Data and Fixtures. I can see the rows generated in the table , however they are empty. Note that it does generate the correct number of rows, it just does not show data. If I use an array instead, everything works properly. Also, if I remove the table and just do {{#each}}, data shows just fine too. Any ideas would be welcome! Thanks

here is the html:

    <div class="table-container">
        {{table-component
        hasFooter=false
        columnsBinding="columns"
        contentBinding="content"}}
    </div>

And here is the controller:

App.CustomersController = Ember.ArrayController.extend({
    numRows: 1,
    columns: function() {
    var nameColumn, typeColumn, phoneColumn, identifierColumn;
    nameColumn = Ember.Table.ColumnDefinition.create({
        columnWidth: 150,
        textAlign: 'text-align-left',
        headerCellName: 'Name',
        getCellContent: function (row) {
            return row.name;
        }

    });
    typeColumn = Ember.Table.ColumnDefinition.create({
        columnWidth: 150,
        textAlign: 'text-align-left',
        headerCellName: 'Type',
        getCellContent: function (row) {
            return row.type;
        }

    });
    phoneColumn = Ember.Table.ColumnDefinition.create({
        columnWidth: 100,
        textAlign: 'text-align-left',
        headerCellName: 'Phone',
        getCellContent: function (row) {
            return row.phone;
        }

    });
    identifierColumn = Ember.Table.ColumnDefinition.create({
        columnWidth: 150,
        textAlign: 'text-align-left',
        headerCellName: 'ID',
        getCellContent: function (row) {
            return row.identifier;
        }

    });
    console.log('in columns func');
    console.log(this.get('content'));
    return [nameColumn, typeColumn, phoneColumn, identifierColumn];
}.property(),

content: function() {
    /*var temp= [
        {
            id: 1,
            name: 'Seller',
            type: 'Supermarket',
            phone: '1-800-Sell',
            identifier: '12345'
        },
        {
            id: 2,
            name: 'Sell',
            type: 'Supermarket',
            phone: '1-800-Sell2',
            identifier: '12356'
        }];
    return temp;*/

return this.store.toArray
    }.property('numRows')
});

(note the commented array that works is also included above)

And the model:

App.Customers = DS.Model.extend({
name: DS.attr('string'),
type: DS.attr('string'),
phone: DS.attr('string'),
identifier: DS.attr('string')
});

Answer 1

When you use an array, the objects are turned into real objects as opposed to being Ember.Object. You should be able to use:

getCellContent: function (row) {
  return row.get('name');
}    

To select the data on each row properly.