0
我想弄清楚Ember.js,以便我不是手動操作DOM,而是使用handlebars。從組件模板中訪問Ember組件數據
我試圖訪問組件的模板內的組件的數據,以便我可以迭代數據並建立一個表。如果這不是Ember的方式,請告訴我。我沒有在模型,商店或路線中設置數據。一切都在組件「問題數據」中完成。
這裏是組件和它的模板:
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}}