从组件模板中访问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}}