Ajouter des composants Ember à Discourse

Documentation Guides pour les développeurs
, ,
1

Dans le tutoriel précédent, j’ai montré comment configurer les parties serveur et client de Discourse pour répondre à une requête.

Nous vous recommandons maintenant de lire la documentation des composants Ember : Introducing Components - Components - Ember Guides

Ancien tutoriel

Dans ce tutoriel, je vais créer un nouveau Composant Ember pour encapsuler du Javascript tiers. Cela sera similaire à une vidéo YouTube que j’ai réalisée il y a quelque temps, que vous pourriez trouver instructive, mais cette fois-ci, elle est spécifique à Discourse et à la façon dont nous organisons les fichiers dans notre projet.

Pourquoi des Composants ?

Handlebars est un langage de templating assez simple. C’est juste du HTML normal avec quelques parties dynamiques. C’est simple à apprendre et excellent pour la productivité, mais pas si génial pour la réutilisation de code. Si vous développez une grande application comme Discourse, vous constaterez que vous souhaitez réutiliser certaines des mêmes choses encore et encore.

Les composants sont la solution d’Ember à ce problème. Créons un composant qui affichera notre collation d’une manière plus agréable.

Création d’un nouveau Composant

Les composants doivent contenir un tiret dans leur nom. Je vais choisir fancy-snack comme nom pour celui-ci. Créons notre template :

app/assets/javascripts/admin/templates/components/fancy-snack.hbs

<div class="fancy-snack-title">
  <h1>{{snack.name}}</h1>
</div>

<div class="fancy-snack-description">
  <p>{{snack.description}}</p>
</div>

Maintenant, pour utiliser notre composant, nous allons remplacer notre template admin/snack existant par celui-ci :

app/assets/javascripts/admin/templates/snack.hbs

{{fancy-snack snack=model}}

Nous pouvons maintenant réutiliser notre composant fancy-snack dans n’importe quel autre template, en lui passant simplement le modèle si nécessaire.

Ajout de code Javascript personnalisé

En plus de la réutilisabilité, les composants dans Ember sont excellents pour ajouter en toute sécurité du Javascript personnalisé, du jQuery et autre code externe. Cela vous donne le contrôle sur le moment où le composant est inséré dans la page et quand il est retiré. Pour ce faire, nous définissons un Ember.Component avec du code :

app/assets/javascripts/admin/components/fancy-snack.js

export default Ember.Component.extend({
  didInsertElement() {
    this._super();
    this.$().animate({ backgroundColor: "yellow" }, 2000);
  },

  willDestroyElement() {
    this._super();
    this.$().stop();
  },
});

Si vous ajoutez le code ci-dessus et actualisez la page, vous verrez que notre collation a une animation d’un arrière-plan jaune qui s’estompe lentement.

Expliquons ce qui se passe ici :

  1. Lorsque le composant est rendu sur la page, il appellera didInsertElement

  2. La première ligne de didInsertElement (et willDestroyElement) est this._super() ce qui est nécessaire car nous sous-classons Ember.Component.

  3. L’animation est effectuée à l’aide de la fonction animate de jQuery .

  4. Enfin, l’animation est annulée dans le hook willDestroyElement, qui est appelé lorsque le composant est retiré de la page.

Vous vous demandez peut-être pourquoi nous nous soucions de willDestroyElement ; la raison est que dans une application Javascript de longue durée comme Discourse, il est important de faire le ménage derrière nous, de peur de fuir de la mémoire ou de laisser des choses en cours d’exécution. Dans ce cas, nous arrêtons l’animation, ce qui indique à toutes les minuteries jQuery qu’elles n’ont plus besoin de se déclencher car le composant n’est plus visible sur la page.

Où aller à partir d’ici

Le tutoriel final de cette série couvre les tests automatisés.

Ce document est contrôlé par version - suggérez des modifications sur github.

17 « J'aime »
Plugin routing problems
Write acceptance tests and component tests for Ember code in Discourse
Introduction to Discourse Development
2

Hi, how do i extend a discourse component thru a plugin? Can you give me some points. Thanks

3

Generally we prefer you don’t extend Discourse plugins, and you stick to plugin outlets or using the widget decoration API to add stuff.

But if you must, you can create an initializer and use Ember’s extend code. Here’s an example that extends an Ember object.

4 « J'aime »
4

Tried with initializer but didnt worked. What i actually want to do is to add 2 more classNames and some actions:

import { withPluginApi } from 'discourse/lib/plugin-api';

function initializeComponentTopicList(api) {
  // extend component from jsapp/components/topic-list.js.es6
  const TopicList = api.container.lookupFactory('component:topic-list');

  TopicList.extend({
    classNames: ['topic-list', 'round', 'table'],
    actions: {
        clickMe: function() {
            console.log('click');
        }
    }
  });
};

export default {
  name: "extend-for-component-topic-list",

  initialize() {
    withPluginApi('0.1', initializeComponentTopicList);
  }
};

And by “didnt worked”, i mean that topic list completly disappeared from page.
Thank you

5

Were there any logs in the console?

6

Nope, no logs at all. However i managed to fix it this way. I hope it will help someone.

import { default as TopicList } from 'discourse/components/topic-list';
import { withPluginApi } from 'discourse/lib/plugin-api';

function initializeComponentTopicList(api) {
  TopicList.reopen({
    classNames: ['topic-list', 'round', 'table'],
  });
};

export default {
  name: "extend-for-component-topic-list",

  initialize() {
    withPluginApi('0.1', initializeComponentTopicList);
  }
};
3 « J'aime »
7

I just ran into the same problem. Add the following as a css/html customisation and observe empty user cards:

<script type="text/discourse-plugin" version="0.5">
    api.container.lookupFactory('component:user-card-contents')
</script>
2 « J'aime »
13

Il serait agréable de voir une documentation mise à jour ici, qui pourrait pointer vers la documentation des composants Glimmer.

3 « J'aime »