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

在要添加新行时绑定操作。您需要做的更改是

1.而不是将generatedContent作为普通数组使其成为Ember数组。

2.将generatedContent作为控制器属性。

3.使用pushObject而不是push

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

控制器看起来像

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

Ember-table动态添加新行

1 个答案: