[email protected] modelli di componenti in un addon

Question

Mi chiedo quale sia la convenzione da utilizzare quando si crea un componente all'interno di un progetto di addon ... Se si genera un componente nel mio progetto di addon utilizzando ember-cli @ 0.2.0, il progetto creerà un file js in addon/components, un template in addon/templates/components e un file js in app/components. La parte su cui non sono chiaro è dove i template dovrebbero vivere per questi componenti. Se il mio modello componente richiede un partial, devo inserire il template parziale nella directory app/templates. Se risiede nella directory addon/templates, non può essere risolto. Quindi la domanda è questa: è meglio mettere tutti i modelli (il modello del componente e i parziali) nella directory app/templates o lasciare il modello del componente nella directory addon/templates/components e il partial nella directory app/templates ? Quest'ultimo si sente leggermente disorganizzato e il primo sembra più corretto solo a causa del comportamento del progetto. Qualcuno ha qualche intuizione?

Grazie in anticipo.

Answer 1

Ember-cli è in grande sviluppo così un sacco della struttura dei file è destinata a cambiare presto, ma qui alcuni spunti sullo stato attuale della struttura di cartelle e il motivo per cui è organizzato il modo in cui è:

La cartella app/ è quella che viene importata direttamente nell'applicazione. Gli helper vengono tirati da qui, ecco perché devi avere un file per ognuno dei tuoi componenti in questa cartella. Inoltre, i modelli verranno estratti dall'applicazione principale qui e, in quanto tali, saranno accessibili nei modi in cui i modelli sono normalmente accessibili in un'app ember (render, partial e risoluzione standard).

Alcune persone scelgono di mettere tutto il loro codice di componenti in app/, ma questa è una cattiva idea, perché la cartella addon/ esiste non solo come una separazione del codice addons, ma come un modo per poter essere importati utilizzando le importazioni ES6 . Così, mentre non è possibile accedere direttamente ai componenti sotto addon/components/, è possibile importarli nella vostra applicazione in questo modo:

import SomeComponent from 'some-addon/components/some-component' 

Questo è molto utile per i consumatori addon se vogliono estendere un addon per aggiungere un po ' funzionalità.

I modelli in addon vengono precompilati nella struttura di build, il che rende i componenti aggiuntivi un po 'più robusti (ad esempio se utilizzano una versione diversa di htmlbars saranno comunque compatibili con l'app di base). Tuttavia, essi non sono accessibili tramite il risolutore, in modo da avere importare manualmente in componenti del addon, che è il motivo per cui il progetto per componenti da applicare presenta come di seguito:

import Ember from 'ember'; 
import layout from '../templates/components/some-component'; 

export default Ember.Component.extend({ 
    layout: layout 
}); 

stili di addons può essere collocato in addon/styles/ o app/styles/. In addon/styles/ sono precompilati e inclusi nell'applicazione per impostazione predefinita. Consiglio vivamente compresi gli stili in app/styles perché questo li rende accessibili utilizzando le importazioni del preprocessore nell'applicazione di base:

@import some-addon/main.css 

Questo li completamente opzionale fa per gli utenti del addon, senza ricorrere a app.import e config inganno (che è buono perché gli addon nidificati non supportano app.import. Non utilizzarlo.

NOTA: non sono automaticamente assegnati ai nomi, quindi è necessario inserire gli stili in una cartella per assicurarsi che non siano in conflitto con altri stili di componenti aggiuntivi.

In sintesi:

• Qualsiasi codice addon che non ha bisogno di essere direttamente accessibile tramite l'applicazione di base tramite aiutanti, inizializzatori, ecc Dovrebbe vivere in addon/
• Tutto quello che vuoi essere accessibili da ES6 le importazioni dovrebbero vivere in addon/
• modelli dovrebbero vivere in addon/templates/ ed essere importati manualmente
• componenti stub, inizializzatori e altri file che dovrebbero essere inclusi nello standard Ember costruire ch ain dovrebbe vivere in app/
• Gli stili devono vivere in app/styles/ e devono essere assegnati a un nome in una cartella (ad es. app/styles/some-addon/)
• Non utilizzare app.import.