Comprendre les composants dans Ember 2

Points clés

• Le composant Ember est le cœur des applications Ember, permettant aux développeurs de définir des balises HTML personnalisées et spécifiques à l'application et d'implémenter leur comportement à l'aide de JavaScript. Dans Ember 2.x, les composants remplacent les vues et les contrôleurs.
• Le composant Ember contient un fichier de modèle de guidon et une classe Ember correspondante. Ces composants peuvent être utilisés avec d'autres composants, et peuvent même être imbriqués dans les composants parents et ont des propriétés similaires aux éléments HTML natifs.
• Des données dynamiques peuvent être ajoutées aux applications Ember via un modèle (l'objet représentant les données sous-jacentes que l'application présente à l'utilisateur). Cela permet la création de composants interactifs et dynamiques.
• L'interaction utilisateur peut être ajoutée à un composant en utilisant des actions (actions envoyées à la classe de composants). Ces actions peuvent être utilisées pour créer des éléments interactifs, tels que des onglets cliquables qui affichent différents contenus.

Cet article a été évalué par des pairs par Edwin Reynoso et Nilson Jacques. Grâce à tous les pairs examinateurs de SitePoint pour que le contenu de SitePoint soit à son meilleur! Ils vous permettent de définir vos propres balises HTML spécifiques à l'application et d'implémenter leur comportement à l'aide de JavaScript. En commençant par Ember 2.x, les composants remplaceront les vues et les contrôleurs (dépréciés) et sont le moyen recommandé de créer des applications Ember.

L'implémentation des composants d'Ember suit autant que possible les spécifications du composant Web W3C. Une fois que les éléments personnalisés sont largement disponibles dans le navigateur, il devrait être facile de migrer des composants de braise vers la norme W3C et de les rendre utilisables par d'autres cadres.

Si vous souhaitez en savoir plus sur les raisons pour lesquelles les composants de routage remplacent les contrôleurs et les vues, consultez cette courte vidéo par les membres de l'équipe Ember Core Yehuda Katz et Tom Dale.

Application de commutateur d'onglet

Pour obtenir un aperçu du composant Ember, nous créerons un widget de commutateur d'onglet. Cela contiendra un ensemble d'onglets avec du contenu pertinent. En cliquant sur un onglet, affiche le contenu de cet onglet et masquer le contenu des autres onglets. Assez simple? Commençons.

Comme toujours, vous pouvez trouver le code de ce didacticiel sur notre référentiel GitHub ou sur ce Twiddle Ember si vous souhaitez expérimenter le code de votre navigateur.

COMPOSITION DES COMPOSANTS EMBRES

Le composant Ember contient un fichier de modèle de guidon et une classe Ember correspondante. Cette classe ne doit être mise en œuvre que lorsque nous devons avoir des interactions supplémentaires avec les composants. Les composants sont utilisés de manière similaire aux balises HTML ordinaires. Lorsque nous construisons le composant de commutateur d'onglet, nous pourrons l'utiliser comme ceci:

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Le fichier de modèle du composant Ember est situé dans le répertoire APP / Templates / Components. Le fichier de classe est situé dans l'application / composants. Nous utilisons toutes les lettres minuscules, séparées par trait d'union entre les mots pour nommer le composant Ember. Ceci est nommé conformément à la convention, qui peut éviter les conflits de nom avec les futurs composants Web HTML.

Notre composant de berceau principal sera un interrupteur d'onglet. Notez que je parle du composant principal, car nous aurons plusieurs composants. Vous pouvez utiliser des composants en conjonction avec d'autres composants. Vous pouvez même nicher des composants dans un autre composant parent. Dans le cas de notre interrupteur d'onglet, nous aurons un ou plusieurs composants de l'onglet comme indiqué ci-dessous:

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Comme vous pouvez le voir, les composants peuvent également avoir des propriétés comme les éléments HTML natifs.

Créer un projet Ember 2.x Projet

Pour suivre ce tutoriel, vous devez créer un projet Ember 2.x. La méthode est la suivante:

Ember est installé à l'aide de NPM. Voir ici pour les tutoriels sur NPM.

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

Au moment de la rédaction de cet article, cela présentera la version 1.13

<code>npm install -g ember-cli
</code>

Ensuite, créez une nouvelle application Ember:

<code>ember -v
=> version: 1.13.8
</code>

Accédez à ce répertoire et modifiez le fichier bower.json pour contenir les dernières versions de l'ember, des données de l'empeillement et de la bilan-bilan:

<code>ember new tabswitcher</code>

Retour au terminal et courir:

<code>{
  "name": "hello-world",
  "dependencies": {
    "ember": "^2.1.0",
    "ember-data": "^2.1.0",
    "ember-load-initializers": "^ember-cli/ember-load-initializers#0.1.7",
    ...
  }
}
</code>

Bower peut vous inviter à analyser la version de Ember. Sélectionnez la version 2.1 dans la liste fournie et préfixez-la avec une marque d'exclamation pour persister sa résolution à bower.json.

Suivant pour démarrer le serveur de développement de Ember CLI:

<code>bower install
</code>

Naviguez dernier vers http: // localhost: 4200 / et vérifiez la version de la console du navigateur.

Créer un composant de commutateur d'onglet

Créons un composant de commutateur d'onglet à l'aide du générateur intégré d'Ember:

<code>ember server</code>

Cela créera trois nouveaux fichiers. L'un est notre fichier de guidon HTML (app / modèles / composants / tab-switcher.hbs), le second est notre fichier JavaScript de classe de composants (app / composants / tab-switcher.js), et le dernier est le fichier de test (tests / intégration / composants / tab-switcher-test.js). Les composants de test ne sont pas dans le cadre de ce tutoriel, mais vous pouvez en savoir plus sur le site Web Ember.

Exécutez maintenant Ember Server pour charger le serveur et accéder à http: // localhost: 4200 /. Vous devriez voir un message de bienvenue intitulé "Bienvenue à Ember". Alors pourquoi nos composants ne sont-ils pas affichés? Eh bien, nous ne l'avons pas encore utilisé, alors utilisons-le maintenant.

en utilisant des composants

Ouvrez le modèle d'application App / Templates / Application.hbs. Ajoutez ce qui suit après la balise H2 pour utiliser le composant.

<code>ember generate component tab-switcher</code>

En Ember, les composants peuvent être utilisés de deux manières. La première méthode, appelée le formulaire en ligne , consiste à les utiliser sans aucun contenu. C'est ce que nous faisons ici. La deuxième méthode est appelée la forme Block Form , qui permet de passer le modèle de guidon au composant et a rendu le modèle où l'expression {{rendement}} apparaît dans le modèle de composant. Dans ce tutoriel, nous nous en tiendrons à la forme en ligne.

Cependant, cela ne montre toujours rien à l'écran. En effet, le composant lui-même n'a rien à afficher. Nous pouvons le modifier en ajoutant la ligne suivante dans le fichier de modèle du composant (app / modèles / composants / tab-switcher.hbs):

<code>{{tab-switcher}}{{/tab-switcher}}</code>

Maintenant, lorsque la page recharge (ce qui devrait se produire automatiquement), vous verrez le texte indiqué ci-dessus. Un moment passionnant!

Créer des composants du projet d'onglet

Maintenant que nous avons configuré notre composant principal de commutateur d'onglet, créons certains composants de l'onglet pour nicher. Nous pouvons créer un nouveau composant d'onglet comme celui-ci:

<code>{{#each tabItems as |tabItem| }}
  {{tab-item item=tabItem 
             setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>

Modifiez maintenant le fichier de guidon du nouveau composant (app / modèles / composants / tab-atem.hbs) vers:

<code>npm install -g ember-cli
</code>

Ensuite, nidons trois éléments d'onglet dans notre composant principal de commutateur d'onglet. Modifiez le fichier de modèle d'onglet-interrupteur (app / modèles / composants / tab-switcher.hbs) vers:

<code>ember -v
=> version: 1.13.8
</code>

Comme mentionné ci-dessus, la fonction d'assistance de rendement rendra tout modèle de guidon transmis à notre composant. Cependant, cela n'est utile que si nous utilisons un interrupteur d'onglet sous forme de bloc. Comme nous n'avons pas fait cela, nous pouvons complètement supprimer la fonction d'assistance de rendement.

Maintenant, lorsque nous regardons le navigateur, nous verrons trois composants de l'onglet, qui affichent tous "le titre des éléments d'onglet". Notre composant est désormais assez statique, alors ajoutons des données dynamiques.

(Le reste est similaire à la sortie précédente, sauf que les paragraphes sont réorganisés et formulés pour maintenir la cohérence du contenu et éviter la duplication. Pour économiser de l'espace, la sortie de la pièce restante n'est pas répétée ici.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!