2016-08-29 30 views
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}}

回答

-1

FIGUR在挖掘文檔時編輯它:https://guides.emberjs.com/v2.7.0/models/

有一個更好的方法,但Ember自己的文檔說你可以用this.set()分配一個關鍵的數據。

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

:爲了得到正確的 「這」,我用一個新的變量保持範圍