灰烬表动态地添加新行

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 Array。

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

3.使用pushObject代替推

4.call需要一个动态行当用户定义的动作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 
     }); 
    } 
    } 
});