[email protected] Komponentenvorlagen in einem Addon

8

Ich frage mich, welche Konvention verwendet werden soll, wenn eine Komponente in einem Addon-Projekt erstellt wird ... Wenn ich eine Komponente in meinem Addon-Projekt mit [email protected] erzeuge, erstellt der Blueprint eine js-Datei in Addon / Komponenten, eine Vorlage in Addon / Templates / Komponenten und eine js-Datei in App / Komponenten. Der Teil, der mir nicht wirklich klar ist, ist, wo Vorlagen für diese Komponenten leben sollten. Wenn meine Komponentenvorlage eine partielle erfordert, muss ich die Teilvorlage in das Verzeichnis app / templates einfügen. Wenn es sich im Verzeichnis addon / templates befindet, kann es nicht aufgelöst werden. Die Frage ist also: Ist es am besten, alle Vorlagen (die Komponentenvorlage und die Teiltexte) in das Verzeichnis app / templates zu legen oder die Komponentenvorlage im Verzeichnis addon / templates / components und teilweise im Verzeichnis app / templates zu belassen ? Letzteres fühlt sich etwas desorganisiert an und das erstere scheint nur aufgrund des Verhaltens des Bauplans korrekter zu sein. Jeder hat einen Einblick?

Vielen Dank im Voraus.

    
Ryan Connolly 26.03.2015, 17:50
quelle

1 Antwort

11

Ember-cli befindet sich in einer starken Entwicklung, daher wird sich die Dateistruktur wahrscheinlich bald ändern, aber hier einige Einblicke in den aktuellen Zustand der Ordnerstruktur und warum sie so angeordnet ist, wie sie ist:

Der Ordner app/ wird direkt in Ihre Anwendung importiert. Helfer werden von hier aus gezogen, weshalb Sie in diesem Ordner eine Datei für jede Ihrer Komponenten haben müssen. Zusätzlich werden hier Templates aus der Hauptanwendung gezogen und auf diese Weise zugänglich gemacht, auf die normalerweise in einer Ember-App zugegriffen werden kann ( render , partial und Standardauflösung).

Einige Leute entscheiden sich dafür, ihren gesamten Komponentencode in app/ zu platzieren, aber das ist eine schlechte Idee, da der Ordner addon/ nicht nur als eine Trennung Ihres Addons-Codes existiert, sondern auch als Möglichkeit, ihn zu importieren Verwendung von ES6-Importen. Obwohl Sie nicht direkt auf die Komponenten unter addon/components/ zugreifen können, können Sie sie wie folgt in Ihre Anwendung importieren:

%Vor%

Dies ist sehr nützlich für Addon-Konsumenten, wenn sie ein Addon erweitern wollen, um einige Funktionen hinzuzufügen.

Vorlagen in addon werden in der Build-Struktur vorkompiliert, was Add-Ons etwas robuster macht (wenn sie beispielsweise eine andere Version von htmlbars verwenden, sind sie immer noch mit der Basis-App kompatibel). Sie sind jedoch nicht über den Resolver zugänglich, daher müssen Sie sie manuell in die Komponenten Ihres Addons importieren, weshalb der Entwurf für Addon-Komponenten wie folgt aussieht:

%Vor%

Styles für Addons können entweder in addon/styles/ oder app/styles/ platziert werden. In addon/styles/ sind sie auch vorkompiliert und standardmäßig in der Anwendung enthalten. Ich empfehle sehr, Stile in app/styles einzufügen, da sie dadurch über Präprozessorimporte in der Basisanwendung zugänglich gemacht werden:

%Vor%

Dies macht sie für Benutzer des Addons völlig optional , ohne auf app.import und config trickery zurückgreifen zu müssen (was gut ist, weil verschachtelte Addons _ app.import nicht unterstützen. Nicht verwenden es.)

HINWEIS: Sie sind nicht automatisch Namespaced, daher sollten Sie Ihre Styles in einem Ordner ablegen, um sicherzustellen, dass sie keinen Konflikt mit anderen Addon-Stilen darstellen.

Zusammenfassend:

  • Jeder Addon-Code, auf den die Basis-App nicht direkt über Helfer, Initialisierer usw. zugreifen kann. Sollte in addon/ leben.
  • Alles, auf das Sie durch ES6-Importe zugreifen möchten, sollte in addon/ leben
  • Vorlagen sollten in addon/templates/ leben und manuell importiert werden
  • Komponenten-Stubs, Initialisierer und andere Dateien, die in der Standard-Ember-Buildkette enthalten sein sollten, sollten in app/ leben.
  • Styles sollten in app/styles/ leben und in einem Ordner namens Namespaced stehen (z. B. app/styles/some-addon/ )
  • Verwenden Sie nicht app.import .
pzuraq 10.05.2015 06:10
quelle

Tags und Links