如何在自己的 Typo3 6.2 扩展中包含 .js 文件？

Question

我使用扩展生成器、extbase 和 fluid 在 Typo3 6.2 中进行了扩展。
我想在前端添加一个时间选择器。
我在网上找到了一个 .js 文件，并希望在扩展程序处于活动状态时包含它，因为我经常需要它。
我把那个文件放在这里：EXT:/Resources/Public/JS/timepicker.js.
我在 this 文章中看到了一个解决方案，但添加了

page.includeJS.tx_myExtension = EXT:/Resources/Public/JS/timepicker.js

底部的 setup.txt 无法正常工作。

我没有在那里定义 page 所以我认为这可能是原因，但我真的不知道 - 这是我在 中的 setup.txt（自动生成的） /typo3conf/ext//Configuration/TypoScript/:

plugin.tx_myext_test {
    view {
        templateRootPath = {$plugin.tx_myext_test.view.templateRootPath}
        partialRootPath = {$plugin.tx_myext_test.view.partialRootPath}
        layoutRootPath = {$plugin.tx_myext_test.view.layoutRootPath}
    }
    persistence {
        storagePid = {$plugin.tx_myext_test.persistence.storagePid}
    }
}

最终我希望我的前端函数能够工作，它已经与 datepicker 一起工作，因为我在我的根模板中包含了 jQuery。但我不想在其中包含时间选择器，只是为了我的扩展。

<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

Answer 1

您可以像这样使用 EXT: 的正确语法：

page.includeJS.myextension = EXT:extkey/Resources/Public/JS/timepicker.js

（你忘了extkey。）

请记住，使用 includeJSFooter 而不是 includeJS 可能会提高您网站的性能。

page.includeJS 是全球可用的 TypoScript 属性。因此，如果您在站点的根 TS 模板中使用它，则 JavaScript 文件将嵌入到每个页面，无论该插件是否在使用中。因此，如果您只想在嵌入插件的页面上使用 JS，我建议使用下面的 Fluid 方法。

为此，请在您的模板中使用 Resource ViewHelper：

<script src="{f:uri.resource(path: 'JS/timepicker.js')}"></script>
<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

Resource ViewHelper 使用相对于扩展程序 Resources/Public 目录的路径。

Answer 2

您可以定义在您的控制器中包含 JS class，以确保它只为您的扩展程序加载。

在 TypoScript 中，要使 JS 文件可配置：

plugin.tx_myext.settings.javascript.file = EXT:myext/Resources/Public/JS/timepicker.js

在控制器操作中：

$this->response->addAdditionalHeaderData('<script src="' .
            $GLOBALS['TSFE']->tmpl->getFileName($this->settings['javascript']['file']) .
            '" type="text/javascript"></script>');

如何在自己的 Typo3 6.2 扩展中包含 .js 文件？

How to include .js files in own Typo3 6.2 Extension?

javascript

jquery

typo3

typoscript

extbase