2017-12-21 34 views
2

나는 ember js를 배우고 있으며, 데이터 테이블의 대안으로 ember-light-table을 발견했습니다.ember-light-table을 사용할 때 직면 한 문제

테이블에 정적 데이터를 표시하고 싶습니다. 그래서 믹스 인과 컴포넌트를 만드는 대신, 코드를 라우트 파일에 직접 작성하고 있습니다. (확실하지 않은 것들이 이런 방식으로 작동 할 것인가 아닌가). 내가 문서 및 다른 블로그의 코드를 보았다

Error: Assertion Failed: [ember-light-table] table must be an instance of Table

: 아래

내 경로 파일

import Route from '@ember/routing/route'; 
import Table from 'ember-light-table'; 
import { computed } from '@ember/object'; 

export default Route.extend({ 
    table : null, 
    columns: computed(function() { 
    return [{ 
     label: 'Email', 
     valuePath: 'email' 
    }, { 
     label: 'Name', 
     valuePath: 'name' 
    }]; 
    }), 

    rows: computed(function() { 
    return [{ 
     "email":"[email protected]", 
     "name":"Abc" 
    }, { 
     "email":"[email protected]", 
     "name":"Xyz" 
    }]; 
    }), 

    init(){ 
    this._super(...arguments); 
    let table = new Table(this.get('columns'),this.get('rows')); 
    console.log("table = ",table); 
    this.set('table', table); 
    } 
}); 

템플릿 파일

{{#light-table table height='65vh' as |t|}} 
    {{t.head fixed=true }} 

    {{#t.body canSelect=false as |body| }} 
    {{/t.body}} 
{{/light-table}} 

내가 콘솔에서 오류가 아래 얻고있다 , 코드는 동일하지만 확실하지 않습니다. 나는 뭔가를 놓치고 있는지 없는지.

미리 감사드립니다.

답변

1

라우터에서이 작업을 수행하지 말고 대신 구성 요소를 만듭니다.
라우터에 init 훅이 없으므로 구성 요소에서 init 훅을 사용하려는 경우 라우터에서 문제가 발생합니다.
가져 오기 라우터와 확장 라우터는 물론 구성 요소 템플릿의 템플릿을 제외한 모든 라우터 코드를 구성 요소에 넣으십시오. 현재 사용중인 템플릿에서 구성 요소를 호출하면 문제가 해결됩니다.

+0

올바른 방법을 알려 주셔서 감사합니다. 이를위한 구성 요소를 만들려고 노력할 것입니다. :) –