在 Typo3 中未调用 RequireJS 回调

问题描述

我们正在为更大的大学网站开发 Typo3 扩展，并且正在努力使用 RequireJS 获取自定义 JavaScript 代码以在前端运行。当我们尝试使用 RequireJS 加载依赖项时，我们连一个简单的示例都无法运行。

我们尝试遵循官方文档 https://docs.typo3.org/m/typo3/reference-coreapi/9.5/en-us/ApiOverview/JavaScript/RequireJS/Index.html，但我们无法调用 Test.say()（见下文）。

我们的项目结构如下：

- Classes
  - (all our PHP code)
- Configuration
  - (AjaxRoutes,FlexForms and TCA) 
- Ressources
  - Private
    - Templates
      - Modulelist
        - List.html
  - Public
    - JavaScript
      - ListFilter.js
- composer.json
- ext_emconf.php
- ext_localconf.php
- ext_tables.sql

List.html：

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<!-- this is just some table filled by a controller -->
<table border="1" cellspacing="1" cellpadding="5">
    <tr>
        <td>Modulname</td>
        <td>OU Name</td>
        <td>ECTS</td>
    </tr>
    <f:for each="{modules}" as="module">
        <tr>
            <td align="top">{module.name}</td>
            <td align="top">
                <f:format.crop maxCharacters="100">{module.offeredBy.name}</f:format.crop>
            </td>
            <td align="top">{module.ects}</td>
        </tr>
    </f:for>
</table>

<!-- our extension is named DemoExtension -->
<f:be.pageRenderer
    includeRequireJsModules="{
        0:'TYPO3/CMS/DemoExtension/ListFilter'
    }"
/>
</html>

ListFilter.js：

console.log("ListFilter.js loaded");
define(['jquery','TYPO3/CMS/Core/DocumentService'],function($,DS) {
    console.log("List.html inside define");
    var Test = {
        message: "test"
    };

    Test.say = function() {
        alert(Test.message);
    };

    $(document).ready(function() {
        console.log("List.html inside define,jQ callback");
        Test.say();
    });

    DS.ready().then(() => {
        console.log("List.html inside define,DS callback");
        Test.say();
    });

    return Test;
});

但是，在加载相应页面时，控制台只打印了以下一行：

ListFilter.js loaded

我们在谷歌上搜索了很多，但无法让它工作。我们缺少什么？

解决方法

TYPO3 在前端默认不加载任何 Javascript。

您的前端呈现的内容由您的模板（打字稿/流体）定义

您可能正在寻找 page.includeJS 或类似的配置。但是最好的方法可以非常广泛地取决于您呈现前端的方式以及您网站中的其他扩展，例如 vhs/flux

PAGE OBJECT 的参考见这个核心文档 https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Setup/Page/Index.html#page

你真的加载了 RequireJS 吗？

PageRenderer 中 TYPO3 中的特殊 RequireJS 支持仅适用于后端。

javascript typo3 typo3-extensions

在 Typo3 中未调用 RequireJS 回调

问题描述

解决方法

相关问答