discovery-list-container-top Outletの上に投稿をレンダリング

開発
1

ごめんなさい、これについては初心者です

ask discourse で以下のように質問しました。
テーマ内で、トピックリストの2つ上のトピックの最初の投稿を discovery-list-container-top アウトレットにレンダリングしたい

いくつかのバージョンが返ってきましたが、私が見る限りでは動作するはずなのに、プレビューではすべてエラーが発生しています。ask discourse に以下のように尋ねました。
サンプルコードをファイルではなく JS タブにどのように配置すればよいですか？

すると、このバージョンが返ってきました。

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]; // あなたのトピックIDに変更してください
    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);
});

そして、エラーコードを ask discourse に貼り付けると、このバージョンが返ってきました。

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

// グローバルデータストア (ハック的ですが、JSタブでは機能します)
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>
  );
});

何が間違っているのか誰か教えてもらえますか？

コンソールでのエラーは次のとおりでした。

コンパイルエラー: SyntaxError: /theme-4/discourse/api-initializers/theme-initializer.gjs:

プレビューに表示されたのは次のとおりです。

image
image1023×102 14.6 KB

ありがとうございます

「いいね！」 1
2

調整したところ、これが動作するようです。

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]; // トピックIDに変更してください
    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
3

Nateさん、ありがとうございます！何を変更したのか確認しようとしています。

あなたのコードは私の最初のバージョンと一致しているようです。

forループでletをconstに置き換えていますね。
それは正しいですか？

discourseのバージョンを尋ねるとエラーが出ます。

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

Nateのバージョンは動作します。

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

誰か、何が間違っているのか説明してもらえますか？なぜletが機能せず、constが機能するのですか？

Nateさん、改めてありがとうございます。

「いいね！」 1
4

let を試しましたが、結果は同じでした。通常、fetch() や ajax() を使用する場合は const を使うからです。

エラーは static template = の行から発生していると思われます。これを使用すると、以下のようなエラーが表示されます。

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

そして、\u003ctemplate\u003e を直接使用すると、エラーは発生しません。

「いいね！」 2