Topic List Item Fußzeilen-Schaltflächen - Zeitachsen-Inhalt

Entwickler
1

Hallo! Ich arbeite an einem Community-Konzept für „Timeline“-Inhalte mit Discourse.

Screen Shot 2020-09-21 at 14.56.13
Screen Shot 2020-09-21 at 14.56.13858×878 41.2 KB

Sowohl die Schaltflächen „Antworten an“ als auch „Teilen“ dienen nur zum Testen. Ich habe eine Komponente wie topic-footer-buttons.hbs (#ember) mit einigen Änderungen erstellt

<div class="topic-list-item-footer-buttons">
  {{#each inlineButtons as |button|}}
    {{d-button
      class=(concat "btn-default topic-list-item-footer-buttons " button.classNames)
      action=button.action
      icon=button.icon
      translatedLabel=button.label
      translatedTitle=button.title
      translatedAriaLabel=button.ariaLabel
      disabled=button.disabled}}
  {{/each}}
</div>

Wenn ich diese Komponente in topic-list.hbs unterhalb der topic-list-item-Vorlage einfüge, funktioniert es! Aber das ist für zukünftige Discourse-Updates oder die Implementierung von Plugins nicht ideal. Deshalb versuche ich, über Admin → Anpassen → Allgemein → Kopfzeile (HTML) zu manipulieren, indem ich topic-list-item.raw ändere.

<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">

Doch ein weiteres Problem ist aufgetaucht: Ich kann die Komponente nicht aus der text/x-handlebars-Vorlage aufrufen. Gibt es eine Möglichkeit, meine Footer-Button-Komponente innerhalb der topic-list-item.raw-Vorlage aufzurufen? Vielleicht über einen Helfer oder ein Widget, das die Komponente aufruft?

Ich würde Ihre Hilfe sehr schätzen, damit ich meine Zweifel ein für alle Mal ausräumen kann.

3 „Gefällt mir“
2

Die Vorgehensweise, die ich in der Vergangenheit dafür angewendet habe, bestand darin, die Buttons in einen HTML-Helper zu verpacken, der das Roh-HTML in den Roh-Templates rendert und das Sie dann über einen Roh-Plugin-Auslass einfügen können. Hier ist ein Beispiel:

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8

Der Klick auf den Button wird in der Komponente topic-list-item verarbeitet, z.

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332

@merefield hat möglicherweise auch noch einige Gedanken dazu :slight_smile:

Außerdem möchten Sie wahrscheinlich die Ordnerstruktur für Theme-Javascripts verwenden, anstatt Skripte in die header.html einzufügen. Siehe dazu:

4 „Gefällt mir“
3

Mir ist aufgefallen, dass der neueste Commit zu preview-edits das Klick-Event entfernt hat: FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub. Gibt es immer noch eine Möglichkeit, den Button-Klick vom topic-list-item-Komponenten zu verarbeiten?

4

Ja, @angus, das wird meiner Meinung nach nicht mehr empfohlen – es hat Ember einen leichten Herzinfarkt verursacht, also habe ich es aus TLP entfernt. Wenn zwei Klick-Events gleichzeitig ausgelöst werden, z. B. durch Klicken auf den Titel eines Themas, das selbst einen Anker enthält, führt der Browser eine vollständige Seitenaktualisierung durch, was in einer OPA eindeutig nicht gewünscht ist. Dies wurde von mehreren Benutzern gemeldet.

In TLP musst du vorerst auf den Titel, die Zusammenfassung oder das Vorschaubild klicken.

Stelle sicher, dass es immer nur eine Klickfläche gibt – überlappende Flächen werden Probleme verursachen.

1 „Gefällt mir“