Ember-Komponenten zu Discourse hinzufügen

[Discourse]

Im vorherigen Tutorial habe ich gezeigt, wie man sowohl die Server- als auch die Client-seitigen Teile von Discourse so konfiguriert, dass sie auf eine Anfrage reagieren.

Wir empfehlen dir jetzt, die Dokumentation zu Ember-Komponenten zu lesen: Introducing Components - Components - Ember Guides

Bevor du eine Komponente schreibst, schau dir das UI Kit mit den gemeinsamen Komponenten, Helpers und Modifiern an; die meisten gängigen Steuerelemente existieren dort bereits.

Altes Tutorial

In diesem Tutorial werde ich eine neue Ember-Komponente erstellen, um Drittanbieter-JavaScript zu kapseln. Das ähnelt einem YouTube-Video, das ich vor einiger Zeit erstellt habe und das für dich aufschlussreich sein könnte, nur dass es diesmal spezifisch für Discourse und die Art und Weise ist, wie wir Dateien in unserem Projekt anordnen.

Warum Komponenten?

Handlebars ist eine ziemlich einfache, verlockende Sprache. Es ist einfach reguläres HTML mit einigen dynamischen Teilen. Das ist leicht zu lernen und gut für die Produktivität, aber nicht so gut für die Wiederverwendung von Code. Wenn du eine große Anwendung wie Discourse entwickelst, wirst du feststellen, dass du dieselben Dinge immer und immer wieder verwenden möchtest.

Komponenten sind Embers Lösung für dieses Problem. Lass uns eine Komponente erstellen, die unseren Snack auf eine schönere Weise anzeigt.

Eine neue Komponente erstellen

Komponenten müssen einen Bindestrich in ihrem Namen haben. Ich werde fancy-snack als Namen für diese Komponente wählen. Lass uns unsere Vorlage erstellen:

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>

Um unsere Komponente zu verwenden, werden wir unsere bestehende admin/snack-Vorlage durch Folgendes ersetzen:

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

{{fancy-snack snack=model}}

Wir können unsere fancy-snack-Komponente nun in jeder anderen Vorlage wiederverwenden, indem wir einfach das erforderliche Modell übergeben.

Eigenes JavaScript-Code hinzufügen

Neben der Wiederverwendbarkeit sind Komponenten in Ember hervorragend geeignet, um eigenem JavaScript, jQuery und anderen externen Code sicher hinzuzufügen. Sie geben dir die Kontrolle darüber, wann die Komponente in die Seite eingefügt wird und wann sie entfernt wird. Um dies zu tun, definieren wir eine Ember.Component mit etwas 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();
  },
});

Wenn du den obigen Code hinzufügst und die Seite aktualisierst, wirst du sehen, dass unser Snack eine Animation mit langsam verblassendem gelbem Hintergrund hat.

Lass uns erklären, was hier passiert:

1. Wenn die Komponente auf der Seite gerendert wird, wird didInsertElement aufgerufen.

2. Die erste Zeile von didInsertElement (und willDestroyElement) ist this._super(), was notwendig ist, weil wir Ember.Component unterklassen.

3. Die Animation wird mit der jQuery animate-Funktion durchgeführt.

4. Schließlich wird die Animation im willDestroyElement-Hook abgebrochen, der aufgerufen wird, wenn die Komponente von der Seite entfernt wird.

Du könntest dich fragen, warum uns willDestroyElement überhaupt wichtig ist; der Grund ist, dass es in einer langlebigen JavaScript-Anwendung wie Discourse wichtig ist, nach uns aufzuräumen, damit wir keinen Speicher verlieren oder Dinge laufen lassen. In diesem Fall stoppen wir die Animation, was allen jQuery-Timern mitteilt, dass sie nicht mehr feuern müssen, da die Komponente nicht mehr auf der Seite sichtbar ist.

Wohin von hier aus

Das letzte Tutorial in dieser Reihe behandelt automatisiertes Testen.

---

Dieses Dokument wird versioniert – schlage Änderungen auf GitHub vor.

[gor]

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

[eviltrout (Robin Ward)]

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.

[gor]

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

[eviltrout (Robin Ward)]

@gor

i mean that topic list completly disappeared from page.

Were there any logs in the console?

[gor]

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);
  }
};

[LeoMcA (Leo McArdle)]

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>

[thoka (Thomas Kalka)]

Es wäre schön, hier eine aktualisierte Dokumentation zu sehen, die auf die Dokumentation der Glimmer-Komponenten verweisen könnte.