Rendre un post au-dessus du conteneur discovery-list-container-top Outlet

Dev
1

Je suis un novice désolé

J’ai utilisé ask discourse pour demander :
dans un thème, je veux afficher le premier message de deux sujets au-dessus de la liste des sujets dans l’Outlet discovery-list-container-top

Il m’a donné plusieurs versions qui, à mon avis, auraient dû fonctionner. Toutes provoquent une erreur dans l’aperçu. Je demande à discourse :
comment puis-je mettre le code d’exemple dans l’onglet JS au lieu des fichiers ?

Il m’a donné cette 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);
});

et lorsque j’ai collé le code d’erreur dans ask discourse, il m’a donné cette 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>
  );
});

Quelqu’un peut-il me dire ce que je fais de mal ?
l’erreur dans la console était :

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

voici ce qui s’est affiché dans l’aperçu

image
image1023×102 14.6 KB

Merci

1 « J'aime »
2

J’ai ajusté et cela semble fonctionner :

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) {
      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 « J'aime »
3

Merci Nate ! J’essaie de comprendre ce que tu as changé

Ton code semble correspondre à ma première version

Tu as remplacé let par const dans la boucle for
est-ce correct ?

La version avec ask discourse renvoie une erreur

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]);
      }
    }

La version de Nate fonctionne

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]);
      }
    }

Quelqu’un peut-il expliquer ce qui ne va pas ? Pourquoi let ne fonctionnerait pas et const oui ?

Merci encore Nate

1 « J'aime »
4

J’ai essayé let et le résultat était le même. C’est juste que j’utiliserais normalement const lors de l’utilisation de fetch() ou ajax().

Je crois que l’erreur provient de la ligne static template = . Avec elle, j’obtiens :

[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)

Et si j’utilise simplement <template> directement, il n’y a pas d’erreur. Je ne pense pas que l’utilisation de static template soit valide ici, donc utiliser directement la balise template fonctionne.

2 « J'aime »