Modification dynamique de l'attribut style sur l'élément de la liste des sujets

Dev
1

Avertissement : très satisfait de la direction prise et merci pour tout le travail accompli jusqu’à présent, car le nouveau système offre beaucoup de puissance. Il suffit de s’assurer que nous conservons certaines capacités équivalentes ? …

Dans mon composant, TLP, je définis actuellement l’attribut de style de la balise externe de l’élément de liste de sujets de manière dynamique :

  • définition de la couleur background: à une valeur RVB unique pour correspondre à la couleur dominante de l’image. Cela devrait idéalement être fait dans la boucle Ember.

Je définis également grid-row-end pour déterminer très rapidement la taille de l’élément de maçonnerie. C’est très rapide et efficace et évite beaucoup de Javascript. Cependant, pour cela, j’utilise Javascript car cela dépend des tailles finales dans le DOM.

Actuellement, ces deux éléments coexistent harmonieusement.

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">

Ce sont toutes deux des personnalisations critiques du composant Thème et sans elles, il ne serait pas supportable.

Ce premier amendement au style est actuellement réalisé avec une liaison directe d’attribut de style avec modifyClass, que je comprends être une méthode obsolète.

Serait-il possible d’avoir une API dans le nouveau monde pour cela s’il vous plaît ?

Ou peut-être ai-je manqué une façon existante de faire cela ?

Cependant, ce n’est pas quelque chose qui, je crois, peut être réalisé avec des classes.

3 « J'aime »
2

Vraiment ? :confused: Il ne suffit pas de passer à la syntaxe de classe native ?

3

Je me base sur ceci

1 « J'aime »
4

Ah, je vois. Je pensais que cela signifiait cette mise à niveau.

1 « J'aime »
5

Il serait bon d’obtenir des éclaircissements.

  • Donc, modifyClass est-il toujours valide ? (Syntaxe juste mise à jour - ce serait bien si c’était le cas de faire référence à ce guide)
  • Puis-je toujours l’utiliser pour accéder à l’attribut de style de la balise englobante ?

Les composants classiques sont différents en ce sens qu’ils fournissaient historiquement un accès aux attributs de niveau de balise englobante en dehors du modèle, de sorte qu’il était simple de les modifier dynamiquement dans le code.

1 « J'aime »
6

Ah, vous avez raison. Il y a un avis de dépréciation dans la console.

Avis de dépréciation : La modification de ‘component:topic-list-item’ avec ‘modifyClass’ est dépréciée. Utilisez le transformateur de valeur ‘topic-list-columns’ et d’autres nouvelles API de plugin topic-list à la place.

1 « J'aime »
7

modifyClass n’est pas déprécié en soi. C’est une méthode de personnalisation risquée, et vous devez prendre des précautions lorsque vous l’utilisez (comme décrit dans la documentation @don liée), mais nous n’avons pas d’intention immédiate de la supprimer.

La raison pour laquelle nous affichons un message de dépréciation pour component:topic-list et component:topic-list-items est que ces composants sont l’implémentation héritée de la liste de sujets, et ne sont pas utilisés lorsque la liste de sujets glimmer est activée. Maintenant, nous avons un ensemble de composants glimmer comme components/topic-list/item.

Donc, techniquement, vous pourriez utiliser modifyClass sur ces nouveaux composants. Mais, parce que ce sont des composants glimmer, vous ne pourrez pas modifier la balise de style via la classe JS, donc cela n’aidera pas avec le problème dans le message initial.

Nous avons un mode “masonry” similaire dans le composant de thème officiel d-topic-thumbnails, il vaut donc la peine de regarder comment il est implémenté. Nous ajoutons une classe unique à chaque “ligne” de la liste de sujets :

Ensuite, nous rendons une balise <style> dynamique dans un plugin-outlet séparé, qui cible ces noms de classe :

Cela dit… c’est un peu compliqué, donc peut-être devrions-nous envisager d’ajouter un valueTransformer spécifique pour permettre de modifier l’attribut style=. C’est un peu délicat à cause des protections xss/htmlSafe d’Ember sur cet attribut… mais je suis sûr que nous pourrions faire fonctionner quelque chose.

3 « J'aime »
8

Merci d’avoir considéré cela David, ce serait formidable !

9

David, j’en ai une autre, serait-il possible de se connecter aux événements Glimmer tels que didInsert, didUpdate, willDestroy via la nouvelle API ?

Je veux exécuter du JavaScript supplémentaire sur didInsert, par exemple, ce qui est actuellement géré par @on et modifyClass.

(Je suis prêt à en faire un nouveau sujet d’ailleurs)

Je vais essayer votre technique ici pour l’instant :

1 « J'aime »
10

Nous pourrions introduire des transformateurs spécifiques à certains endroits. Mais je ne nous vois pas ajouter une API générale qui vous permettrait de vous attacher à n’importe quel élément/composant.

Concernant la discussion sur l’attribut style=, j’ai créé cette PR. J’essaierai de la faire examiner/fusionner :

3 « J'aime »
11

Merci. Jusqu’à présent, tout va bien avec votre technique actuelle, je l’ai adaptée pour TLP et elle semble fonctionner correctement. Je reviendrai si je trouve d’autres lacunes potentielles.

Génial ! Je devrais être prêt pour cela au moment où elle sera fusionnée, j’ai hâte ! Merci David !

3 « J'aime »
12

Fonctionne à merveille, merci encore ! :rocket:

2 « J'aime »
13

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