# 如何在ajax调用后手动将内容添加到pluginOutlet？以及如何重新渲染或刷新pluginOutlet？

**URL:** <https://meta.discourse.org/t/how-to-manually-add-contents-to-pluginoutlet-after-ajax-call-and-how-to-rerender-or-refresh-a-pluginoutlet/266640>\
**Category:** Development\
**Created:** [2023年五月30日 19:37 UTC](https://meta.discourse.org/t/how-to-manually-add-contents-to-pluginoutlet-after-ajax-call-and-how-to-rerender-or-refresh-a-pluginoutlet/266640 "2023-05-30T19:37:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pixl8\_Nick](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pixl8_nick/32/297128_2.png) [@Pixl8\_Nick](https://meta.discourse.org/u/Pixl8_Nick)\
**Post date:** [2023年五月30日 19:37 UTC](https://meta.discourse.org/t/how-to-manually-add-contents-to-pluginoutlet-after-ajax-call-and-how-to-rerender-or-refresh-a-pluginoutlet/266640/1 "2023-05-30T19:37:13Z")

</div>

你好 👋

我是 Discourse 主题和 emberjs 的新手，目前正在开发一个包含主网站导航项的主题。

导航项 JSON 来自一个 ajax 请求，我需要在两个位置显示它。

第一个位置是 `header-buttons:before`。我通过 `api.decorateWidget` 并触发 `site-header:force-refresh` appEvents 成功实现了这一点。

```plaintext
ajax( settings.site_navigation_links_endpoint ).then((result) => {

	if (!result.length) {
		return;
	}

	result.map((customHeaderLinksArray) => {

		const anchorAttributes = {
			title : customHeaderLinksArray.title,
			href : customHeaderLinksArray.url,
			target : "self"
		};

		headerLinks.push(
			h(
				`li.custom-header-nav-item`,
				h( "a.custom-header-nav-item-link", anchorAttributes, customHeaderLinksArray.title )
			)
		);

	});

	headerNav = h("ul.custom-header-nav", headerLinks);

	if( settings.site_navigation_position == "inline" ) {
		api.decorateWidget("header-buttons:before", (helper) => {
			return headerNav;
		});
	}

	appEvents.trigger("site-header:force-refresh");

	// To display on location (2nd location, see below )
	// ...
	// ...
}

```

第二个位置是通过 pluginOutlet `below-site-header`。  
我认为我不能像上面那样使用 `api.decorateWidget`，因为这是一个 pluginOutlet 而不是 widget (?)。

我的问题是：

1. 如何手动将 ajax 内容插入到 pluginOutlet？
2. 我还想知道如何在 ajax 调用后即时编译 virtual-dom？例如上面的变量 `headerNav`，我想获得它的编译后的 HTML 标记。不确定使用哪个库/函数。
3. 如果可能，如何重新渲染 pluginOutlet？类似于 `appEvents.trigger("site-header:force-refresh");`

提前感谢！🙇‍♂️

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2023年五月30日 22:13 UTC](https://meta.discourse.org/t/how-to-manually-add-contents-to-pluginoutlet-after-ajax-call-and-how-to-rerender-or-refresh-a-pluginoutlet/266640/2 "2023-05-30T22:13:51Z")

</div>

> [@Pixl8\_Nick](#):
>
> 我相信我不能像上面那样做，使用 `api.decorateWidget`，因为这是 pluginOutlet 而不是 widget

正确。有两种方法可以解决这个问题……

1. 您可以将自定义内容制作成 widget，然后像这样在 plugin outlet 中挂载 widget：

2. 保持 widget 装饰器不变，并创建一个单独的 Ember 组件，在 plugin outlet 中执行您想要的操作。我们一直在用 Ember 组件（Discourse 的大部分内容都是基于此构建的）来取代 widget。

---

<div class="post-metadata">

**Author:** ![Pixl8\_Nick](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pixl8_nick/32/297128_2.png) [@Pixl8\_Nick](https://meta.discourse.org/u/Pixl8_Nick)\
**Post date:** [2023年五月31日 12:55 UTC](https://meta.discourse.org/t/how-to-manually-add-contents-to-pluginoutlet-after-ajax-call-and-how-to-rerender-or-refresh-a-pluginoutlet/266640/3 "2023-05-31T12:55:36Z")

</div>

非常感谢 Kris！这非常有帮助。

我选择了第二种方法，使用组件，因为小部件正在逐渐淘汰。除了 .hbs 文件中的函数调用有一个小小的拼写错误，应该是 `{{did-insert this. fetchNavLinks}}`，其他一切都正常！

很高兴知道我们有 `did-insert`，这让我松了一口气！我现在已经完成了任务。🙇‍♂️

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2023年五月31日 15:23 UTC](https://meta.discourse.org/t/how-to-manually-add-contents-to-pluginoutlet-after-ajax-call-and-how-to-rerender-or-refresh-a-pluginoutlet/266640/4 "2023-05-31T15:23:42Z")

</div>

> [@Pixl8\_Nick](#):
>
> 除了函数调用中的小笔误，

啊，很高兴你注意到了，我已经修正了上面的帖子

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2023年六月30日 15:24 UTC](https://meta.discourse.org/t/how-to-manually-add-contents-to-pluginoutlet-after-ajax-call-and-how-to-rerender-or-refresh-a-pluginoutlet/266640/5 "2023-06-30T15:24:01Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.