你如何在 OctoberCMS 的局部渲染组件？

Posted 2023-02-23

【中文标题】你如何在 OctoberCMS 的局部渲染组件？

【英文标题】：How do you render a component within a partial in OctoberCMS?

【发布时间】：2020-09-25 07:39:13

【问题描述】：

在 OctoberCMS 中，我正在创建一个组件。在组件的 default.htm 部分文件 (/acme/myplugin/components/mycomponent/default.htm) 中，我可以通过以下方式包含任何其他已注册的组件：

% component 'someComponentName' %

但是，如果我有以下代码来处理 AJAX 请求：

public function onAjaxRequest()

    return [
        '#ajaxUpdate' => $this->renderPartial('@dates-partial'),
    ];

在我的dates-partial.htm 文件中，我放置了与default.htm 文件中相同的内容，someComponentName 组件未呈现。我还尝试将以下内容放在文件顶部：

[someComponentName]
==

但是这会直接作为文本输出到页面。

如何让renderPartial() 渲染包含组件的部分？

【问题讨论】：

您从哪里处理onAjaxRequest ajax 请求。将组件包含在其他组件的部分中是不好的做法，如果要共享代码，则应使用主题部分。一旦你嵌套组件，它会导致意外的行为，有时它会起作用，有时它不会。

@HardikSatasiya onAjaxRequest 由我的插件组件处理。我不确定“使用部分主题”是什么意思。我将部分放在我的主题目录中，但它仍然具有相同的行为。

我已经添加了我的案例，您可以为您检查它的工作原理。如果你错过了什么。

【参考方案1】：

您好，我尝试了您的方法，但似乎对我有用。让我分享一下我是怎么做的。

我的页面

title = "compo-in-partial-in-ajax"
url = "/compo-partial-ajax"
layout = "default"
is_hidden = 0

[newCompo]

[newOne]
==
<!-- AJAX enabled form -->
<form data-request="onTest">
    <!-- Action button -->
    <button type="submit">Call Ajax</button>
</form>

<div id="ajaxUpdate">
Default content.
</div>
% component 'newCompo' %

我添加了 2 个组件

newCompo % component 'newOne' %，所以我在里面渲染另一个组件。 newOne

这是我的 ajax 处理程序

public function onTest() 
    return ['#ajaxUpdate' => $this->renderPartial('@partial.htm')];

newCompo 组件的 -> default.htm

% component 'newOne' %

newOne 组件的 -> default.htm

<h1>Newone</h1>

components/newcompo 内部的部分文件 -> partial.htm

<h4>partial</h4>
% component 'newOne' %

---

输出

---

正常

ajax 调用后