# 我在新插件的 outlet 中加载主题
**URL:** https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819
**Category:** Development
**Created:** [2021年八月9日 13:37 UTC](https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819 "2021-08-09T13:37:48Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [2021年八月9日 13:37 UTC](https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819/1 "2021-08-09T13:37:48Z")
你好。我试图在插件中创建的新模板里，将一组主题列表传递给 `{{topic-list topics=myChosenTopics}}`。
我正在研究如何在 JavaScript 文件中设置 `myChosenTopics` 的值，以便将其传递给 `topic-list` 组件。
我找到的最接近的解决方案是这里描述的 `setupComponent(args, component) { .. component.set('myChosenTopics', myChosenTopics); }` 方法：[https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949。](https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949%E3%80%82)
是否有更好的方法？
如果没有，看来这种方法仅适用于链接到连接器类（即通过插件出口）时。若要在模板中添加新的插件出口，是否需要采取特殊步骤？
---
### Author:  [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [2021年八月9日 15:01 UTC](https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819/2 "2021-08-09T15:01:58Z")
我想我已经让这起作用了。目标：在新模板的指定位置加载某些主题（可能也适用于添加到现有模板，但我尚未测试过）：
1. 在您的模板中插入自定义的插件出口（我的自定义插件出口名为 “great-topics”，示例如下）：
`{{plugin-outlet name="great-topics"}}`
1. 在连接器中添加 Handlebars 代码（即您的组件）：
**[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.hbs**
```plaintext
我在插件出口中！正在加载主题：
{{topic-list topics=featuredTopics showPosters=true}}
```
1. 为您的新连接器中的组件添加 JavaScript 代码：
**[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.js.es6**
[此代码改编自以下 Meta 帖子，其中包含加载带有 “featured” 标签的主题的代码：[https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949](https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949)]
```plaintext
const ajax = require('discourse/lib/ajax').ajax;
const Topic = require('discourse/models/topic').default;
setupComponent(args, component) {
ajax("/tag/featured.json").then(function (result) {
let featuredTopics = [];
// 创建一个空数组，我们将把主题推入其中
var featuredUsers = result.users;
// 获取相关用户
result.topic_list.topics.slice(0, 4).forEach(function (topic) {
// 我们提取从 0 开始到 4 结束的主题
// 这意味着我们将显示总共 3 个。增加 4 以显示更多。
topic.posters.forEach(function (poster) {
poster.user = $.grep(featuredUsers, function (e) { return e.id == poster.user_id; })[0];
});
// 将用户与我们主题关联
featuredTopics.push(Topic.create(topic));
// 将我们的主题推入 featuredTopics 数组
});
}) //end result.topic.topic_list...
component.set('featuredTopics', featuredTopics); // 主题在此处被添加到组件中
component.set("loadingTopics", false); // 我上面的代码没有加载器。但如果您需要加载器，这里也有。为此还需在 hbs 文件中添加相应内容。请参阅上方 Meta 上的链接帖子
}); //end ajax
}//end setup component
```
* * *
至少对我来说，这已经可以正常工作，能够在我的新模板的插件出口中加载带有 “featured” 标签的主题。
要查看其效果，需要重启服务器。
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2021年八月9日 20:38 UTC](https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819/3 "2021-08-09T20:38:50Z")
这个想法听起来很有趣。