구성 요소 템플릿 내에서 Ember 구성 요소 데이터에 액세스하십시오.

Question

Ember.js를 알아내어 수동으로 DOM을 조작하지 않고 핸들 바를 대신 사용하려고합니다.

데이터를 반복하고 테이블을 만들 수 있도록 구성 요소의 템플릿 내에서 구성 요소의 데이터에 액세스하려고합니다. 이것이 엠버 (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}}

Answer 1

으로 나뉘어진다 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}}

: 권리를 얻기 위해 "이"나는 새로운 변수를 사용하여 범위를 유지