javascript - Ember-table 动态添加新行

Question

我在这里看这个例子:

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

内容是使用 tableContent 函数制作的。您将如何动态添加到此表中？即当您需要动态添加新行时，使用要添加到新行的五个新值调用 tableContent:

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

Answer 1

当你想添加一个新行时绑定(bind)一个 Action 。你需要做的改变是

1.不是将 generatedContent 设为普通数组，而是将其设为 Ember 数组。

2.make generatedContent 作为 Controller 属性。

3.用pushObject代替push

4.在需要动态行时调用用户定义的操作addRow。

Controller 看起来像

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
      });
    }
  }
});