Obtenir l'accès au composant glimmer pour accéder aux éléments du parent

J’ajoute un composant à before-topic-list-body. J’ai besoin qu’il récupère des données de la catégorie ou du sujet (et j’ajouterai les données que je veux à celui des sérialiseurs qui semble le plus logique).

J’y ai passé quelques heures et j’ai décidé que j’étais perdu et qu’il y avait de fortes chances que ce soit un problème de 2 à 5 minutes pour me donner un indice dont j’ai besoin.

Je me souviens vaguement d’avoir pensé ou entendu quelque chose à ce sujet auparavant, mais je suis bloqué.

2 « J'aime »

:thinking: hmmm

peut-être que ce sujet contient quelque chose qui peut aider ?

Merci, @Lilly ! Ce n’est pas une mauvaise idée, mais j’avais peur que currentUser s’applique à toute la page, et pas seulement à l’endroit où le composant est inséré, et je pense que j’ai raison. Pour voir ce qui était disponible de cette façon, j’ai recherché dans les plugins officiels et j’ai obtenu cette liste de services (si j’étais intelligent, je saurais comment les trouver dans le code source de Discourse, mais je ne le suis pas) :

  @service adminPluginNavManager;
  @service appEvents;
  @service capabilities;
  @service chatApi;
  @service composer;
      @service currentUser;
  @service currentUser;
  @service dialog;
  @service dTemplatesModal;
  @service encryptWidgetStore;
  @service hCaptchaService;
  @service imageCaptionPopup;
  @service menu;
  @service messageBus;
  @service modal;
  @service moreTopicsPreferenceTracking;
  @service presence;
  @service quickSearch;
  @service router;
  @service search;
  @service searchPreferencesManager;
  @service session;
  @service site;
  @service siteSettings;
  @service store;
  @service taskActions;
  @service toasts;
  @service upgradeStore;
  @service userFieldValidations;
  @service whosOnline;
2 « J'aime »

Je l’ai trouvé. Voici d’où l’obtenir dans mon contexte :

<RatingOne @scaleValue={{this.scaleValue}} @topic={{this.parentView._parentView.topic}} />

Je suis donc capable d’utiliser ces parentView et _parentView pour remonter jusqu’au sujet ! C’est la magie que je recherche (ce qui, je pense, résoudra également un autre problème sur un autre projet). Maintenant, il ne me reste plus qu’à mettre les choses dans le contrôleur de sujet, ce qui, j’espère, est tout ce que je sais (au moins en grande partie) faire !

1 « J'aime »

Cela a-t-il imprimé un message de dépréciation dans la console ? Cela aurait dû le faire, car nous allons bientôt supprimer l’accès à parentView depuis PluginOutlet. En fait, c’est tellement déconseillé que cela devrait afficher une bannière d’avertissement aux administrateurs dans l’interface utilisateur :sweat_smile:

Si vous n’avez vu aucun avertissement, veuillez nous en informer !

(parentView fait partie du système de composants classique d’Ember, dont nous nous éloignons)

Si vous souhaitez accéder à des informations provenant de niveaux supérieurs dans l’arborescence, elles doivent soit être passées en argument à Plugin Outlet, soit vous devez utiliser l’un des services disponibles (comme currentUser ou router).

2 « J'aime »

Ah, je vois ce qui s’est passé. Vous utilisez ._parentView, pas .parentView. La version soulignée vous permet de contourner le message de dépréciation. Mais cela cessera tout de même de fonctionner dans les prochaines semaines.

Cette PR empêche ce type de contournement, donc .parentView et ._parentView lèveront tous deux la dépréciation :

2 « J'aime »

Merci, @david !

Non. Pas même après avoir cherché un moment. Je suis sur 27eea3250cbde2e8bca754f445bee403c059eba3

<RatingOne @scaleValue={{this.scaleValue}} @topic={{this.parentView._parentView.topic}} />
<td>
  <span class="rating-title">{{this.ratingName}}</span> 
  Ceci est le sujet {{this.topic.id}}
  Ceci est la catégorie {{this.topic.category.title}} (id de catégorie : {{this.topic.category_id}})
  {{log "notation ceci" this}}
  {{log "valeur de l'échelle" this.scaleValue}}
  {{log "valeur de la notation" this.ratingValue}}
  {{log "catégorie" this.topic.category_id}}
    <form>
        {{!-- {{this.ratingLow}} --}}
       {{#each this.ratingOptions as |option|}}
            <input type="radio" name="rating" value={{option.value}} checked={{if (eq option.value this.ratingValue) "checked"}}> <span class="rotated-label">{{option.label}}</span>
        {{/each}}
        {{!-- {{this.ratingHigh}} --}}
    </form>
</td>

Ah. OK. Donc, puis-je utiliser router pour accéder au sujet ou à la catégorie ? Ce que je pense devoir faire, c’est intégrer ces ratingOptions dans le sérialiseur de sujet ou de catégorie afin de pouvoir ajouter ces notations multiples au sujet dans la liste des sujets afin que ces éléments puissent être notés sans entrer dans les sujets (soi-disant, les gens les connaîtront déjà, donc ils n’auront pas besoin d’entrer dans le sujet pour savoir sur quoi ils votent).

Hmm. Il ne semble pas.

2 « J'aime »

Ok, cela devrait être corrigé par ce commit. Pouvez-vous confirmer que vous voyez maintenant l’avertissement ?

Idéalement, ce genre de choses serait disponible en tant qu’arguments sur la sortie du plugin.

Vous avez mentionné ‘before-topic-list-body’ ci-dessus. Cela a tous ces arguments :

2 « J'aime »
{{log "rating this parent" this.parentView._parentView.topic}}

génère une erreur laide.


<RatingOne @scaleValue={{this.scaleValue}} @passedRouter={{this.router}} @topic={{this.parentView}} />

ne semble pas générer d’erreur.

J’ai vraiment besoin de above-topic-list-item, mais grâce à votre excellent exemple, j’ai pu trouver qu’il devrait avoir le sujet dans outletArgs,

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/topic-list-item.gjs#L284

Ha ! Je vais le faire !

Donc outletArgs signifie que c’est maintenant dans le this de la chose ? (C’est ce qu’il semble - je pensais que j’aurais besoin de chercher dans args d’une manière ou d’une autre…)

Donc, dans mon connecteur hbs, je peux accéder à this.topic et ensuite je peux appeler mon composant comme ceci :

<RatingOne @name="one" @topic={{this.topic}}/>

Et ensuite dans le hbs du composant RatingOne (qui sera un jour renommé simplement rating puisque j’ai trouvé comment lui passer des choses) je peux

  Ceci est le sujet {{this.topic.id}} {{this.topic.title}}
  Ceci est l'ID de la catégorie : {{this.topic.category_id}})

et obtenir les informations du sujet !

Et maintenant que je vois le sujet, je peux aller ajouter mes arguments au sérialiseur de sujet, n’est-ce pas ? (Il serait peut-être préférable de le passer juste à la catégorie… ou peut-être que je vais juste passer une valeur “doTheThing” dans le sérialiseur et obtenir les informations réelles de SiteSettings, car je pense qu’ils veulent cela au niveau du site et non de la catégorie).

À moins que je n’aie trébuché sur autre chose de déprécié, il semble que vous l’ayez fait. Merci un million. :bière: :bières: :verres_à_pied: :portefeuille:

3 « J'aime »

Ceci est lié à « comment je fais fonctionner les choses dans Glimmer, donc je garde cela ici.

Je dois appeler ce code après que chaque sujet soit rendu pour réorganiser les éléments <td>. J’ai utilisé above-topic-item, qui place les notes avant le titre du sujet. Ce hack sauvage réorganise les éléments <td> à l’aide de javascript.

// document.addEventListener("DOMContentLoaded", function() {
//   const table = document.querySelector('table.topic-list.ember-view');
//   const rows = table.getElementsByTagName('tr');

//   // todo: ceci doit être appelé au chargement de la page
//   for (let row of rows) {
//     const cells = Array.from(row.getElementsByTagName('td'));
//     cells.sort((a, b) => {
//       const orderA = parseInt(window.getComputedStyle(a).order, 10);
//       const orderB = parseInt(window.getComputedStyle(b).order, 10);
//       return orderA - orderB;
//     });

//     for (let cell of cells) {
//       row.appendChild(cell);
//     }
//   }
// });

Je pense que je dois « juste » appeler une fonction afterRender ou autre chose au lieu de la chose de niveau document que j’ai. Peut-être le routeur ?

2 « J'aime »

Tu sais, je me demande, Jay, si ta dernière question n’a pas été l’inspiration pour ceci : Upcoming topic-list changes - how to prepare themes and plugins :thinking: :wink:

Et je crois que la réponse à ta dernière question est finalement : « checkout la nouvelle API ! :rocket: »

3 « J'aime »

Drôle. Et la personne qui voulait le travail qui nécessitait cela vient de réapparaître. Peut-être que ce sera plus simple maintenant !

2 « J'aime »