在 discovery-list-container-top Outlet 上方渲染一个帖子

开发
1

我对此很陌生，抱歉

我使用 ask discourse 询问了：
在主题中，我想在 discovery-list-container-top 出口的主题列表上方渲染来自上面两个主题的第一篇帖子

它给了我几个版本，在我看来它们应该可以工作。所有版本在预览中都抛出了一个错误。我问 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]; // 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);
});

当我把错误代码粘贴到 ask discourse 时，它给了我这个版本

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

有人能告诉我我做错了什么吗？
控制台中的错误是：

Compile error: 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 循环中用 const 替换了 let
这是正确的吗？

ask discourse version 抛出错误

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，就不会有错误。我不认为在这里使用 static template 是有效的，所以直接使用模板标签就可以了。

2 个赞