2017-04-12 4 views
1

Was ich tun möchte, ist eine Zeichenfolge an {{component}} Helfer übergeben, aber ich möchte mehr Kontrolle darüber, welche Zeichenfolge es zur Laufzeit übergeben wird.Ember - Erweiterung {{Komponente}} helper

z.B.

Ich habe dies untersucht, es stellt sich heraus, dass dies nicht möglich ist Natürlich gibt es computed Eigenschaft, aber es braucht kein Argument.

Als nächstes schaute ich in Erweiterung der Helfer. This stackoverflow Frage zeigt, dass Sie eine erweitern können, aber ich konnte nicht finden, wo der component Helfer in Ember befindet. Es scheint auch keine Fragen/Unterlagen bezüglich der Erweiterung bestehender Helfer zu geben. Dies würde ich mit diesem Ansatz tun.

// I can't find where the {{component}} helper is located. 
import Component from './???' 

export default Component.extend({ 
    compute(componentType, hash) { 
     let componentName = getComponentToRender(componentType); 
     this._super(componentName, hash) 
    } 
}) 

Was habe ich vermisst? Es wäre toll, wenn mich jemand in die richtige Richtung bringen könnte.

+0

Vielleicht checkout [flexi] (https://flexi.readme.io/docs) – Lux

+0

Flexi ist ein UI-Framework. Meine Frage hat damit nichts zu tun. – CookieMonster

+1

Flexi löst, was Sie wollen: wie Sie mehrere Layouts für die gleiche Komponente haben. Vielleicht könnte es Ihnen helfen zu überprüfen, wie sie das gelöst haben. Ich wollte dich nur dorthin führen, sorry. Ich dachte, es wäre interessant für dich. – Lux

Antwort

-1

Die einzige Möglichkeit, eine Funktion aus einer Vorlage aufzurufen, ist das Schreiben eines Helpers. Tatsächlich erwähnt Ihre Referenz StackOverflow Frage auch über Helfer. Writing an helper wird Ihr Problem lösen.

Sie müssen den component Helfer nicht erweitern. Sie müssen es komponieren. Wie folgt:

{{component (getComponentToRender ComponentType.Button)}} 

Hier ist die working twiddle.

+0

Danke für die Antwort. Ich habe es nicht ausprobiert, aber ich sehe es mir an. Um Ihre Frage zu beantworten, könnte ich mehrere Brandings der gleichen App für verschiedene Zwecke haben. In Produkt X könnte es also rot sein, aber Produkt Y könnte blau sein. Sie sind unterschiedliche Produkte, verwenden aber meistens denselben Code. Nun, es war nur ein Beispiel. Ich mache das nicht wirklich. – CookieMonster

+0

Ich habe deine Antwort ausprobiert, aber ich glaube nicht, dass es funktioniert. Nichts wird gerendert. Bitte sehen Sie es auf diesem Dreh. https://ember-twiddle.com/3a6dfa56a59a4f81e5883d88c59d3459?openFiles=templates.application.hbs%2Ctemplates.components.my-component.hbs – CookieMonster

+0

Sie haben absolut Recht. Ich hatte mir vorgenommen, dass Params kein Array war (auch wenn es ein 's' ist!). Es funktioniert jetzt wie erwartet. – CookieMonster

Verwandte Themen