Rendere einen Beitrag über dem discovery-list-container-top Outlet

Entwickler
1

Ich bin ein Neuling, sorry

Ich habe Ask Discourse gefragt:
In einem Theme möchte ich den ersten Beitrag von zwei Themen oberhalb der Themenliste im discovery-list-container-top Outlet rendern.

Es hat mir mehrere Versionen gegeben, die meiner Meinung nach funktionieren sollten. Alle werfen einen Fehler in der Vorschau. Ich frage Ask Discourse:

Wie würde ich den Beispielcode in den JS-Tab anstatt in Dateien einfügen?

Es gab mir diese Version:

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

class FirstPosts extends Component {
  @tracked posts = [];

  constructor() {
    super(...arguments);
    this.loadPosts();
  }

  async loadPosts() {
    let topicIds = [123, 456]; // change to your topic IDs
    let posts = [];
    for (let id of topicIds) {
      let res = await fetch(`/t/${id}.json`);
      let data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

  static template = <template>
    {{#each this.posts as |post|}}
      <div class="first-post-preview">
        <h4>{{post.topic_title}}</h4>
        {{{post.cooked}}}
      </div>
    {{/each}}
  </template>;
}

export default apiInitializer("0.11.1", api => {
  api.renderInOutlet("discovery-list-container-top", FirstPosts);
});

Und als ich den Fehlercode in Ask Discourse eingefügt habe, gab es mir diese Version:

import { apiInitializer } from "discourse/lib/api";

// Global data store (hacky, but works for the JS tab)
window.firstPostsData = [];

fetch("/t/123.json")
  .then(r => r.json())
  .then(data => window.firstPostsData.push(data.post_stream.posts[0]));

fetch("/t/456.json")
  .then(r => r.json())
  .then(data => window.firstPostsData.push(data.post_stream.posts[0]));

export default apiInitializer(api => {
  api.renderInOutlet("discovery-list-container-top", 
    <template>
      {{#each (theme-prefix "firstPostsData" window=true) as |post|}}
        <div class="first-post-preview">
          <h4>{{post.topic_title}}</h4>
          {{{post.cooked}}}
        </div>
      {{/each}}
    </template>
  );
});

Kann mir jemand sagen, was ich falsch mache?

Der Fehler in der Konsole war:

Compile error: SyntaxError: /theme-4/discourse/api-initializers/theme-initializer.gjs:

Das zeigte die Vorschau:

image
image1023×102 14.6 KB

Danke

1 „Gefällt mir“
2

Ich habe es angepasst und das scheint zu funktionieren:

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

class FirstPosts extends Component {
  @tracked posts = [];

  constructor() {
    super(...arguments);
    this.loadPosts();
  }

  async loadPosts() {
    let topicIds = [123, 456]; // Ändern Sie dies in Ihre Themen-IDs
    let posts = [];
    for (let id of topicIds) {
      const res = await fetch(`/t/${id}.json`);
      const data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

  <template>
    {{#each this.posts as |post|}}
      <div class="first-post-preview">
        <h4>{{post.topic_title}}</h4>
        {{{post.cooked}}}
      </div>
    {{/each}}
  </template>;
}

export default apiInitializer((api) => {
  api.renderInOutlet("discovery-list-container-top", FirstPosts);
});

image
image1166×893 221 KB

1 „Gefällt mir“
3

Danke Nate! Ich versuche herauszufinden, was du geändert hast

Dein Code scheint mit meiner ersten Version übereinzustimmen

Du hast let durch const in der for-Schleife ersetzt
ist das korrekt?

Die Discourse-Version wirft einen Fehler

for (let id of topicIds) {
      let res = await fetch(`/t/${id}.json`);
      let data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }

Nates Version läuft

for (let id of topicIds) {
      const res = await fetch(`/t/${id}.json`);
      const data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }

Kann mir jemand erklären, was falsch ist? Warum let nicht funktioniert und const schon?

Nochmals danke Nate

1 „Gefällt mir“
4

Ich habe let versucht und das Ergebnis war dasselbe. Es ist nur so, dass ich normalerweise const verwenden würde, wenn ich fetch() oder ajax() verwende.

Ich glaube, der Fehler kommt von der Zeile static template = . Damit erhalte ich:

[THEME 10283 'Pokemon Theme'] Error: connector component has no associated template. Ensure the template is colocated or authored with gjs.
    at h (plugin-connectors.js:35:11)
    at eY.renderInOutlet (plugin-api.gjs:1116:5)
    at todo.gjs:43:7
    at eH (plugin-api.gjs:3363:10)
    at Object.initialize (api.js:21:14)
    at i.initialize (app.js:265:28)
    at index.js:379:19
    at e.each (index.js:183:7)
    at e.walk (index.js:112:10)
    at e.each (index.js:59:20)
    at e.topsort (index.js:65:10)
    at iL._runInitializer (index.js:392:11)
    at iL.runInstanceInitializers (index.js:377:10)
    at l._bootSync (instance.js:116:22)
    at iL.didBecomeReady (index.js:784:18)
    at invoke (index.js:262:14)
    at m.flush (index.js:180:11)
    at g.flush (index.js:334:19)
    at z._end (index.js:762:32)
    at _boundAutorunEnd (index.js:499:12)

Und wenn ich einfach direkt <template> verwende, gibt es keinen Fehler. Ich glaube nicht, dass die Verwendung von static template hier gültig ist, daher funktioniert die direkte Verwendung des Template-Tags.

2 „Gefällt mir“