TYPO3中实现点击<td>渲染Partial并传递当前website参数

要实现点击对应<td>时渲染指定Partial，需要结合前端事件监听和后端AJAX渲染——因为Fluid是服务器端模板引擎，无法直接在客户端触发Partial渲染。以下是具体实现步骤：

1. 修正DOM元素标识（避免重复ID） #

循环中每个<td>使用相同id="renderBusinessDisconnected"是无效的（ID必须唯一），改为class并添加data属性存储当前website的关键标识（比如UID）：

<f:for each="{websites}" as="website" iteration="i">
<tr class="tx_goclientwebsites__row">
    <td>{i.index+1}</td>
    <td>{website.name}</td>
    <td>{website.url}</td>
    <!-- 替换为class + data属性存储website UID -->
    <td class="render-business-disconnected" data-website-uid="{website.uid}">
        {website.locationsCount}
    </td>
    <td>
        <span
            class="rounded-circle icon_circle cursor-pointer"
            data-toggle="tooltip"
            onclick="copyToClipboard('{website.apiKey}')"
            title="{f:translate(key: 'copyTooltip')}"
            data-placement="top"
        >
            <i class="img-icon">
                <f:image
                    src="EXT:go_clientwebsites/Resources/Public/Icons/copy.svg"
                    alt="CopyId"
                    class="copyicon"
                />
            </i>
        </span>
    </td>
</tr>
</f:for>

2. 编写前端AJAX逻辑 #

添加JavaScript监听<td>的点击事件，发送请求到后端获取渲染后的Partial内容，替换当前<td>的内容：

document.addEventListener('DOMContentLoaded', function() {
    // 监听所有目标td的点击事件
    document.querySelectorAll('.render-business-disconnected').forEach(td => {
        td.addEventListener('click', function() {
            const websiteUid = this.dataset.websiteUid;
            const self = this;

            // 发送AJAX请求到TYPO3后端
            fetch('/index.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: new URLSearchParams({
                    eID: 'ajaxRenderBusinessDisconnected', // TYPO3 AJAX标识
                    websiteUid: websiteUid
                })
            })
            .then(response => response.text())
            .then(html => {
                // 替换td内容为渲染后的Partial
                self.innerHTML = html;
            })
            .catch(error => console.error('加载Partial失败:', error));
        });
    });
});

3. 后端实现AJAX处理逻辑 #

在你的EXT:go_clientwebsites扩展中添加AJAX处理逻辑：

3.1 注册AJAX路由 #

在ext_localconf.php中注册eID：

$GLOBALS['TYPO3_CONF_VARS']['FE']['eID_include']['ajaxRenderBusinessDisconnected'] = \Vendor\GoClientwebsites\Controller\AjaxController::class . '::renderBusinessDisconnected';

3.2 创建AJAX控制器 #

在Classes/Controller/AjaxController.php中编写处理动作：

<?php
namespace Vendor\GoClientwebsites\Controller;

use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
use Vendor\GoClientwebsites\Domain\Repository\WebsiteRepository;

class AjaxController extends ActionController
{
    protected WebsiteRepository $websiteRepository;

    public function injectWebsiteRepository(WebsiteRepository $websiteRepository)
    {
        $this->websiteRepository = $websiteRepository;
    }

    public function renderBusinessDisconnectedAction()
    {
        // 获取前端传递的website UID
        $websiteUid = GeneralUtility::_POST('websiteUid');
        $website = $this->websiteRepository->findByUid((int)$websiteUid);

        // 渲染Partial并输出HTML
        $this->view->assign('website', $website);
        echo $this->view->renderPartial('BusinessDisconnected', '', ['website' => $website]);
        exit;
    }
}

4. 确保Partial正确接收参数 #

你的Partial代码保持不变，确保能正常使用{website}对象：

<!-- Partial: BusinessDisconnected.html -->
<!-- 示例内容，可根据需求修改 -->
<div class="business-disconnected-content">
    <h5>{website.name} 断开连接详情</h5>
    <p>关联位置数: {website.locationsCount}</p>
    <!-- 其他需要展示的字段 -->
</div>

关键说明 #

• 不能直接在前端传递整个website对象，必须通过后端根据UID重新获取，保证数据安全和完整性。
• TYPO3的eID机制是处理前端AJAX请求的标准方式，确保请求被正确路由到控制器。
• 点击后替换<td>内容为Partial的渲染结果，实现动态加载效果。

内容的提问来源于stack exchange，提问作者Adil Naseem