CODEWITHSUNDEEP
javascriptember.jsember-table
shell
shell

Reputation: 1937

Ember-table dynamically add a new row

I am looking at this example here:

http://emberjs.jsbin.com/bihemir/edit?html,css,js

Content is made with the tableContent function. How would you add to this table dynamically? i.e call tableContent with five new values to be added to a new row when you need to dynamically add a new row:

tableContent: function(newDate, newOpen, newHigh, newLow, newClose) {
    var generatedContent = [];
    generatedContent.push({
        date:   newDate,
        open:   newOpen,
        high:   newHigh
        low:    newLow,
        close:  newClose
     });
   }
   return generatedContent;
 }.property()

Upvotes: 2

Views: 611

Answers (1)

Nitin9791
Nitin9791

Reputation: 1144

bind an action when you want to add a new row. The changes you need to do is

1.instead of making generatedContent as normal array make it Ember Array.

2.make generatedContent as a controller property.

3.use pushObject instead of push

4.call a user defined action addRow when needed a dynamic row.

The controller looks like

App.ApplicationController = Ember.Controller.extend({ 
  tableColumns: function() {
    var dateColumn, openColumn, highColumn, lowColumn, closeColumn;
    dateColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 150,
      textAlign: 'text-align-left',
      headerCellName: 'Date',
      getCellContent: function(row) {
        return row.get('date').toDateString();
      }
    });
    openColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 100,
      headerCellName: 'Open',
      getCellContent: function(row) {
        return row.get('open').toFixed(2);
      }
    });
    highColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 100,
      headerCellName: 'High',
      getCellContent: function(row) {
        return row.get('high').toFixed(2);
      }
    });
    lowColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 100,
      headerCellName: 'Low',
      getCellContent: function(row) {
        return row.get('low').toFixed(2);
      }
    });
    closeColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 100,
      headerCellName: 'Close',
      getCellContent: function(row) {
        return row.get('close').toFixed(2);
      }
    });
    return [dateColumn, openColumn, highColumn, lowColumn, closeColumn];
  }.property(),
  generatedContent:Ember.A(),
  tableContent: function() {
    var generatedContent = this.get('generatedContent:Ember');
    for (var i = 0; i < 100; i++) {
      var date = new Date();
      date.setDate(date.getDate() + i);
      generatedContent.pushObject({
        date: date,
        open:  Math.random() * 100,
        high:  Math.random() * 100 + 50,
        low:   Math.random() * 100 - 50,
        close: Math.random() * 100
      });
    }
    return generatedContent;
  }.property(),
  actions:{
    addRow(date,open,high,low,close){
       var generatedContent = this.get('generatedContent:Ember');
        generatedContent.pushObject({
        date: date,
        open:  open,
        high:  high,
        low:   low,
        close: close
      });
    }
  }
});

Upvotes: 2

Related Questions