Zugriff auf Glimmer-Komponenten von Dingen aus der Elternkomponente

Entwickler
1

Ich füge eine Komponente zu before-topic-list-body hinzu. Ich benötige, dass sie Daten aus der Kategorie oder dem Thema abruft (und ich werde die Daten, die ich benötige, zu dem Serializer hinzufügen, der am sinnvollsten erscheint).

Ich habe mehrere Stunden damit verbracht und bin zu dem Schluss gekommen, dass ich nicht weiterkomme und es gut möglich ist, dass dies ein 2-5-Minuten-Problem ist, um mir einen Hinweis zu geben, den ich brauche.

Ich erinnere mich vage daran, etwas darüber gedacht oder gehört zu haben, aber ich stecke fest.

2 „Gefällt mir“
2

:thinking: hmmm

vielleicht hat dieses Thema etwas, das helfen kann?

3

Danke, @Lilly! Keine schlechte Idee, aber ich befürchtete, dass currentUser sich auf die gesamte Seite bezieht und nicht nur dort, wo die Komponente eingefügt wird, und ich glaube, ich habe Recht. Um zu sehen, was auf diese Weise verfügbar war, habe ich die offiziellen Plugins durchsucht und diese Liste von Diensten erhalten (wenn ich schlau wäre, wüsste ich, wie ich sie im Discourse-Quellcode finden kann, aber das bin ich nicht):

  @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 „Gefällt mir“
4

Ich habe es gefunden. Hier ist, wo ich es aus meinem Kontext bekomme:

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

Ich kann also diese parentView und _parentView verwenden, um mich zum Thema zurückzuarbeiten! Das ist die Magie, nach der ich gesucht habe (was, wie ich glaube, auch ein anderes Problem in einem anderen Projekt lösen wird). Jetzt muss ich nur noch die Sachen in den Topic-Controller einfügen, was hoffentlich alles Dinge sind, von denen ich (zumindest meistens) weiß, wie man sie macht!

1 „Gefällt mir“
5

Hat dies eine Deprecation-Meldung in der Konsole ausgegeben? Das sollte es, da wir den Zugriff auf parentView von PluginOutlet’s bald entfernen werden. Tatsächlich ist es so nicht empfohlen, dass es Administratoren in der Benutzeroberfläche eine Warnmeldung anzeigen sollte :sweat_smile:

Wenn Sie keine Warnungen gesehen haben, lassen Sie es uns bitte wissen!

(parentView ist Teil des klassischen Ember-Komponentensystems, von dem wir uns weg bewegen)

Wenn Sie auf Informationen von weiter oben im Baum zugreifen möchten, muss dies entweder als Argument an das Plugin Outlet übergeben werden, oder Sie müssen einen der verfügbaren Dienste (wie currentUser oder router) verwenden.

2 „Gefällt mir“
6

Ah, ich sehe, was passiert ist. Sie verwenden ._parentView und nicht .parentView. Die Version mit Unterstrich ermöglicht es Ihnen, die Deprecation-Meldung zu umgehen. Aber sie wird trotzdem in den nächsten Wochen nicht mehr funktionieren.

Dieser PR verhindert diese Art von Workaround, sodass sowohl .parentView als auch ._parentView die Deprecation auslösen werden:

2 „Gefällt mir“
7

Danke, @david!

Nein. Nicht einmal, nachdem ich eine Weile gesucht habe. Ich bin auf 27eea3250cbde2e8bca754f445bee403c059eba3

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

<td class="rating-one">
  <span class="rating-title">{{this.ratingName}}</span>
  Dies ist Thema {{this.topic.id}}
  Dies ist Kategorie {{this.topic.category.title}} (Kategorie-ID: {{this.topic.category_id}})
  {{log "rating this" this}}
  {{log "scale value" this.scaleValue}}
  {{log "rating value" this.ratingValue}}
  {{log "category" 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. Kann ich also router verwenden, um zum Thema oder zur Kategorie zu gelangen? Was ich (glaube ich) tun muss, ist, diese ratingOptions in den Thema- oder Kategorie-Serializer zu bekommen, damit ich diese mehreren Themenbewertungen zur Themenliste hinzufügen kann, damit diese Dinge bewertet werden können, ohne die Themen aufzurufen (vermutlich sind die Leute bereits mit ihnen vertraut, sodass sie das Thema nicht aufrufen müssen, um zu wissen, worüber sie abstimmen).

Hmm. Sieht nicht so aus.

2 „Gefällt mir“
8

Ok, das sollte durch diesen Commit behoben sein. Können Sie bestätigen, dass Sie die Warnung jetzt sehen?

Idealerweise wären diese Dinge als Argumente für den Plugin-Outlet verfügbar.

Sie haben oben „before-topic-list-body“ erwähnt. Das hat all diese Argumente:

2 „Gefällt mir“
9 
{{log "rating this parent" this.parentView._parentView.topic}}

erzeugt einen hässlichen Fehler.

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

scheint keinen Fehler zu erzeugen.

Ich brauche wirklich above-topic-list-item, aber dank Ihres guten Beispiels konnte ich feststellen, dass es das Thema in outletArgs haben sollte.

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

Ha! Ich werde es tun!

Bedeutet outletArgs, dass es jetzt im this des Elements ist? (Das sieht so aus – ich dachte, ich müsste irgendwie in args nachsehen…)

Also kann ich in meinem Connector-HBS auf this.topic zugreifen und dann meine Komponente so aufrufen:

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

Und dann im HBS für die RatingOne-Komponente (die eines Tages einfach in rating umbenannt wird, da ich herausgefunden habe, wie man Dinge daran übergibt) kann ich

  Dies ist Thema {{this.topic.id}} {{this.topic.title}}
  Dies ist Kategorie-ID: {{this.topic.category_id}})

und die Thema-Dinge bekommen!

Und jetzt sehe ich das Thema, jetzt kann ich meine Argumente zum Thema-Serialisierer hinzufügen, richtig? (Es wäre besser, es nur an die Kategorie zu übergeben… oder vielleicht übergebe ich nur einen „doTheThing“-Wert im Serialisierer und hole die eigentlichen Dinge von SiteSettings, da ich glaube, dass sie dies auf der Website und nicht auf der Kategorieebene wünschen.)

Wenn ich nicht irgendwie auf etwas anderes Veraltetes gestoßen bin, scheint es, als hätten Sie es geschafft. Vielen Dank. :beer: :beers: :clinking_glasses: :moneybag:

3 „Gefällt mir“
10

Dies bezieht sich auf „wie ich Dinge in Glimmer zum Laufen bringe, also behalte ich das hier.“

Ich muss diesen Code nach dem Rendern jedes Themas aufrufen, um die <td>-Elemente neu zu ordnen. Ich habe above-topic-item verwendet, was die Bewertungen vor dem Thema platziert. Dieser wilde Hack ordnet die <td>-Elemente mithilfe von JavaScript neu.

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

//   // todo: dies muss beim Laden der Seite aufgerufen werden
//   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);
//     }
//   }
// });

Ich denke, ich muss nur etwas wie afterRender oder etwas anderes aufrufen, anstatt das dokumentweite Ding, das ich habe. Vielleicht der Router?

2 „Gefällt mir“
11

Ich frage mich wirklich, Jay, ob deine letzte Frage die Inspiration dafür war: Upcoming topic-list changes - how to prepare themes and plugins :thinking: ;)\n\nUnd ich glaube, die Antwort auf deine letzte Frage ist letztendlich: „Schau dir die neue API an! (https://meta.discourse.org/t/customizing-the-topic-list/350411?u=merefield) :rocket:“

3 „Gefällt mir“
12

Lustig. Und die Person, die die Arbeit wollte, die dies erforderte, ist gerade wieder aufgetaucht. Vielleicht wird das jetzt einfacher!

2 „Gefällt mir“