0
私はEmber.jsを把握して、手動でDOMを操作するのではなく、代わりにハンドルバーを使用しています。コンポーネントテンプレート内からEmberコンポーネントデータへのアクセス
コンポーネントのテンプレート内のコンポーネントのデータにアクセスして、データを繰り返し処理してテーブルを作成できるようにしようとしています。これがEmberの方法でないなら、私に知らせてください。モデル、ストア、またはルートにデータセットがありません。すべてがコンポーネント "issue-data"で行われます。ここ
は、コンポーネントとそのテンプレートである：ここ
import Ember from 'ember';
export
default Ember.Component.extend({
runAll: null,
csvData: null,
initTable: function() {
function buildTable() {
var csvFile;
Ember.$.ajax({
url: 'open_issues_data/open_issues_data.csv',
dataType: 'text',
async: false,
success: function(response) {
csvFile = response;
},
error: function(err) {
console.log(err);
}
});
Papa.parse(csvFile, {
complete: function(results) {
csvFile = results.data;
this.csvData = csvFile;
}
});
/* Uncomment when ready to implement filter
options = {
valueNames: ["issue_number", "customer_id", "date_reported", "location"]
};
var myList = new List("table-div", options);
*/
}
buildTable();
}.on('didInsertElement'),
didInsertElement() {
this.runAll = Ember.run.later(this, function() {
this.initTable();
this.runAll = Ember.run.later(this, this.runAll, 60000);
}, 60000);
},
didDestroyElement() {
Ember.run.cancel(this.runAll);
}
});<div id="table-div">
<input class="search" placeholder="Filter by your input">
<button class="sort" data-sort="issue_number">Sort by Issue #</button>
<table id='data-table' class='table table-striped table-bordered'>
<tbody id='table-body' class="list">
{{#each row in issue-data.csvData}}
<tr>
{{#each column in row}}
<td>{{column}}</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
{{yield}}ルートについての鋳型である：
<h2>Open Issues Data</h2>
{{issue-data}}
{{outlet}}