エンバー・テーブルを動的に私はここに、この例で探しています新しい行

Question

を追加します。

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

コンテンツはtableContent機能で作られています。このテーブルにどのように動的に追加しますか？すなわちあなたが動的に新しい行を追加する必要がある場合、新しい行に追加される5つの新しい値で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.コントローラプロパティとして生成されたコンテンツ。代わりにプッシュ

4.callユーザ定義のアクションのAddRow動的行を必要とする

3.useのpushObject。

コントローラは

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

のように見えます