Ember-Tabelle hinzufügen dynamisch eine neue Zeile

Question

ich bei diesem Beispiel suche hier:

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

Inhalt wird mit der tableContent Funktion gemacht. Wie würden Sie diese Tabelle dynamisch hinzufügen? d.h nennen tableContent mit fünf neuen Werten zu einer neuen Zeile hinzugefügt werden, wenn Sie eine neue Zeile dynamisch hinzufügen müssen:

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

binden eine Aktion aus, wenn Sie eine neue Zeile hinzufügen möchten. Die Änderungen, die Sie tun müssen, ist

1. statt generatedContent als normales Array zu machen machen es Ember Array.

2.make generatedContent als Controller-Eigenschaft.

3.Use pushObject anstelle von Push

4.call eine benutzerdefinierte Aktion addRow wenn eine dynamische Zeile benötigt.

Der Controller sieht aus wie

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