2017-12-21 9 views
2

Ich lerne ember js und ich stieß auf ember-light-table als Alternative zu Datentabellen.Ein Problem mit der Verwendung von ember-light-table

Ich möchte nur einige statische Daten in Tabelle anzeigen. Anstatt also Mixin und Component zu erstellen, schreibe ich Code direkt in die Routendatei. (Nicht sicher, ob die Dinge auf diese Weise funktionieren oder nicht).

Unten ist meine Routendatei

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

Vorlagendatei

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

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

ich unten Störung erhalten in der Konsole:

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

I-Code von Dokumenten und anderen Blog auch gesehen habe Code scheint identisch, aber nicht sicher Bin ich etwas fehlt oder nicht.

Vielen Dank im Voraus.

Antwort

1

Tun Sie dies nicht im Router, sondern erstellen Sie eine Komponente.
Jetzt haben Sie auch Probleme in Ihrem Router, da es keinen Init-Hook im Router gibt, aber Sie möchten den Init-Hook in der Komponente verwenden.
Setzen Sie den gesamten Router-Code in die Komponente ein, mit Ausnahme des Import-Routers und des Routers und natürlich der Vorlage in der Komponentenvorlage. In Ihrer Vorlage, die Sie gerade verwenden, rufen Sie Ihre Komponente und das sollte das Problem beheben

+0

Vielen Dank für den richtigen Weg, um dies zu tun. Ich werde versuchen, eine Komponente dafür zu erstellen. :) –

Verwandte Themen