從組件模板中訪問Ember組件數據

Question

我試圖弄清楚Ember.js，以便不手動操作DOM，而是使用把手。

我正在嘗試訪問組件模板中組件的數據，以便可以遍歷數據並構建表。 如果這不是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}} 

Answer 1

在瀏覽文檔時找到了答案： https : //guides.emberjs.com/v2.7.0/models/

有一種更好的方法，但是Ember自己的文檔說您可以使用this.set（）;為數據分配一個密鑰。 為了獲得正確的“ this”，我使用了一個新變量來保留作用域：

 var _component = this; 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; _component.set('issues', this.csvData); } }); 

 <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 issues as |issue|}} <tr> {{#each issue as |column|}} <td>{{column}}</td> {{/each}} </tr> {{/each}} </tbody> </table> </div> {{yield}}