Dynamisches Ändern des Style-Attributs bei Topic List Item

Entwickler
1

Haftungsausschluss: Sehr zufrieden mit der Richtung hier und danke für all die bisherige Arbeit, da das neue System viel Potenzial hat. Wir müssen nur sicherstellen, dass wir einige gleichwertige Funktionen beibehalten? …

In meiner Komponente, TLP, setze ich derzeit das Stilattribut des äußeren Tags des Topic List Items dynamisch:

  • Setzen der background: Farbe auf einen eindeutigen RGB-Wert, um die dominante Farbe des Bildes abzugleichen. Dies sollte idealerweise in der Ember-Schleife erfolgen.

Ich setze auch grid-row-end, um die Größe des Masonry-Elements sehr schnell zu bestimmen. Dies ist sehr schnell und effizient und vermeidet viel Javascript. Hierfür verwende ich jedoch Javascript, da es von den endgültigen Größen im DOM abhängt.

Derzeit koexistieren diese glücklich.

image

<tr> style="background: rgb(56, 10, 58); grid-row-end: span 48;" data-topic-id="23321" id="ember168" class="topic-list-item category-uncategorized tag-inforunners visited white-text has-thumbnail tiles-grid-item ember-view" data-is-last-viewed-topic="true">

Dies sind beides kritische Anpassungen der Theme-Komponente und ohne sie wäre sie nicht unterstützbar.

Diese erste Stiländerung wird derzeit mit einer direkten Stilattributbindung mit modifyClass erreicht, von der ich verstehe, dass sie eine veraltete Methode ist.

Wäre es möglich, in der neuen Welt eine API dafür zu haben?

Oder vielleicht habe ich eine bestehende Möglichkeit übersehen, dies zu bewerkstelligen?

Dies ist jedoch nichts, von dem ich glaube, dass es mit Klassen erreicht werden kann.

3 „Gefällt mir“
2

Ist es? :confused: Muss man nicht nur zur nativen Klassensyntax aktualisieren?

3

Ich richte mich nach diesem.

1 „Gefällt mir“
4

Ach so. Ich dachte, das bedeutet dieses Upgrade.

1 „Gefällt mir“
5

Es wäre gut, Klarheit zu bekommen.

  • Ist modifyClass also noch gültig? (Nur aktualisierte Syntax – es wäre gut, wenn ja, auf diese Anleitung zu verweisen)
  • Kann ich damit immer noch auf das Style-Attribut des umschließenden Tags zugreifen?

Klassische Komponenten unterscheiden sich dadurch, dass sie historisch gesehen Zugriff auf Attribute auf der Ebene des umschließenden Tags außerhalb der Vorlage boten, sodass sie im Code einfach dynamisch geändert werden konnten.

1 „Gefällt mir“
6

Ah, Sie haben Recht. In der Konsole gibt es einen Hinweis auf veraltete Funktionen.

Hinweis auf veraltete Funktionen: Das Ändern von ‘component:topic-list-item’ mit ‘modifyClass’ ist veraltet. Verwenden Sie stattdessen den Werttransformator ‘topic-list-columns’ und andere neue APIs des topic-list-Plugins.

1 „Gefällt mir“
7

modifyClass selbst ist nicht veraltet. Es ist eine riskante Anpassungsmethode, und Sie sollten Vorsichtsmaßnahmen treffen, wenn Sie sie verwenden (wie in der von @don verlinkten Dokumentation beschrieben), aber wir haben keine unmittelbaren Pläne, sie zu entfernen.
Der Grund, warum wir eine Veraltungsmeldung für component:topic-list und component:topic-list-items ausgeben, ist, dass diese Komponenten die Legacy-Implementierung der Themenliste sind und nicht verwendet werden, wenn die Glimmer-Themenliste aktiviert ist. Jetzt haben wir eine Reihe von Glimmer-Komponenten wie components/topic-list/item.

Technisch gesehen könnten Sie modifyClass auf diesen neuen Komponenten verwenden. Da es sich jedoch um Glimmer-Komponenten handelt, können Sie das Style-Tag nicht über die JS-Klasse ändern, sodass es nicht bei dem Problem in der OP hilft.

Wir haben einen ähnlichen “Masonry”-Modus in der offiziellen d-topic-thumbnails Theme-Komponente, daher lohnt es sich, sich anzusehen, wie diese implementiert ist. Wir fügen jeder “Zeile” der Themenliste eine eindeutige Klasse hinzu:

Dann rendern wir ein dynamisches <style>-Tag in einem separaten Plugin-Outlet, das auf diese Klassennamen abzielt:

Das gesagt… es ist ein wenig kompliziert, daher sollten wir vielleicht in Erwägung ziehen, einen spezifischen valueTransformer hinzuzufügen, um die style=-Attributänderung zu ermöglichen. Es ist wegen der xss/htmlSafe-Schutzmechanismen von Ember auf diesem Attribut ein wenig knifflig… aber ich bin sicher, wir könnten etwas funktionierendes auf die Beine stellen.

3 „Gefällt mir“
8

Danke für die Berücksichtigung, David, das wäre großartig!

9

David, ich habe noch eine Frage: Wäre es möglich, über die neue API Glimmer-Ereignisse wie didInsert, didUpdate, willDestroy abzufangen?

Ich möchte zum Beispiel bei didInsert zusätzlichen JavaScript-Code ausführen, was derzeit über @on und modifyClass gehandhabt wird.

(Ich kann das auch gerne in einem neuen Thema ansprechen)

Ich werde hier vorerst deine Technik ausprobieren:

1 „Gefällt mir“
10

Wir könnten an bestimmten Stellen spezifische Transformer einführen. Aber ich sehe nicht, dass wir eine allgemeine API hinzufügen würden, die es Ihnen erlauben würde, sich an jedes Element/jede Komponente anzuhängen.

Was die Diskussion über das style=-Attribut angeht, habe ich diesen PR erstellt. Ich werde versuchen, ihn überprüfen/zusammenführen zu lassen:

3 „Gefällt mir“
11

Danke. Bisher funktioniert Ihre aktuelle Technik gut, ich habe sie für TLP angepasst und sie scheint gut zu funktionieren. Ich werde mich melden, wenn ich weitere potenzielle Lücken finde.

Großartig! Ich sollte bereit sein, wenn das zusammengeführt ist, ich freue mich darauf! Danke David!

3 „Gefällt mir“
12

Funktioniert wie am Schnürchen, nochmals vielen Dank! :rocket:

2 „Gefällt mir“
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.