README

composer require topwire/topwire

配置

将以下TypoScript添加到您的网站中

page.includeJSLibs.topwire = EXT:topwire/Resources/Public/JavaScript/topwire.js
page.includeJSLibs.topwire.type = module
page.includeJSLibs.topwire.async = 1
page.includeJSLibs.topwire.defer = 1
page.includeJSLibs.topwire.disableCompression = 1
page.includeJSLibs.topwire.excludeFromConcatenation = 1

或者您可以在前端构建链中导入此模块。

示例

生成用于部分渲染的链接

`lib.typoscript`

lib.tsExample = TEXT
lib.tsExample.typolink.htmlSpecialChars = 1
lib.tsExample.typolink.parameter.data = page:uid
lib.tsExample.typolink.topwire.type = plugin
lib.tsExample.typolink.topwire.extensionName = TopwireExamples
lib.tsExample.typolink.topwire.pluginName = Json
lib.tsExample.typolink.returnLast = url

`Fluid.html`

<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.plugin>
    <f:link.action
        class="btn btn-primary"
        additionalParams="{topwire: {type: 'context'}}"
        action="json"
    >
        Link that renders plugin action
    </f:link.action>
</topwire:context.plugin>

<f:link.page
    class="btn btn-primary"
    pageUid="42" 
    additionalParams="{topwire: {type: 'typoScript', typoScriptPath: 'lib.tsPluginExample', recordUid: '42', tableName: 'tt_content'}}"
>
    Show rendered TypoScript path
</f:link.page>

</html>

在Extbase插件的一个Fluid模板部分中使用Turbo Frame进行包装

`Default.html`

<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:turbo.frame id="my_plugin">
    <h2>Default action</h2>
    <f:link.action action="my">Show my action result</f:link.action>
</topwire:turbo.frame>    

</html>

`My.html`

<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:turbo.frame id="my_plugin">
    <h2>My action</h2>
    <f:link.action action="default">Show default action result</f:link.action>
</topwire:turbo.frame>    

</html>

渲染插件

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.plugin extensionName="FeLogin" pluginName="Login">
    <topwire:context.render />
</topwire:context.plugin>

</html>

渲染插件的一个特定（非默认）动作

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.plugin 
    extensionName="MyExtension" 
    pluginName="MyPlugin" 
    action="list"
>
    <topwire:context.render />
</topwire:context.plugin>

</html>

渲染插件的一个特定（非默认）动作，并将输出限制在给定的Fluid部分

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.plugin 
    extensionName="MyExtension" 
    pluginName="MyPlugin" 
    action="list" 
    section="MySection"
>
    <topwire:context.render />
</topwire:context.plugin>

</html>

渲染一个包装在Turbo Frame中的插件

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.plugin extensionName="FeLogin" pluginName="Login">
    <topwire:turbo.frame id="other_plugin" wrapResponse="true">
        <topwire:context.render />
    </topwire:turbo.frame>
</topwire:context.plugin>

</html>

异步渲染一个包装在Turbo Frame中的插件

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.plugin extensionName="FeLogin" pluginName="Login">
    <topwire:turbo.frame id="other_plugin_async" src="async" wrapResponse="true">
        Loading...
    </topwire:turbo.frame>
</topwire:context.plugin>

</html>

渲染一个包装在Turbo Frame中的内容元素

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.contentElement uid="148">
    <topwire:turbo.frame id="content_element" wrapResponse="true">
        <topwire:context.render />
    </topwire:turbo.frame>
</topwire:context.contentElement>

</html>

异步渲染一个包装在Turbo Frame中的内容元素

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.contentElement uid="148">
    <topwire:turbo.frame id="content_element_async" src="async" wrapResponse="true">
        Loading...
    </topwire:turbo.frame>
</topwire:context.contentElement>

</html>

渲染一个包装在Turbo Frame中的任何TypoScript

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.typoScript typoScriptPath="lib.tsExample">
    <topwire:turbo.frame id="typo_script" wrapResponse="true">
        <topwire:context.render />
    </topwire:turbo.frame>
</topwire:context.typoScript>

</html>

异步渲染一个包装在Turbo Frame中的任何TypoScript

<html
    xmlns:topwire="http://typo3.org/ns/Topwire/ViewHelpers"
    data-namespace-typo3-fluid="true">

<topwire:context.typoScript typoScriptPath="lib.tsExample">
    <topwire:turbo.frame id="typo_script_async" src="async" wrapResponse="true">
        Loading...
    </topwire:turbo.frame>
</topwire:context.typoScript>

</html>

概念

Topwire上下文

topwire上下文是一段信息，它定义了哪个内容元素应该独立渲染，而不包含页面上可用的其他任何内容。大多数情况下，它将是一个包含Extbase插件的内容元素。

上下文需要以下技术信息

记录表名称（例如 tt_content）
记录uid
渲染路径，如TypoScript中定义（例如 tt_content.form_formframework.20）
页面ID

虽然90%的使用案例是为内容元素和/或插件定义渲染上下文，但也可能为其他表定义渲染上下文。唯一的要求是，具有uid的记录存在于表中，并且路径中定义的TypoScript也是可用的。

待办事项

可能可选地允许在Turbo Frame中包装服务器响应，以无需更改插件本身
实现框架的其他功能或使其能够使用任意框架
将内容对象也注册为服务以实现TYPO3 12兼容性
添加一种方法来使用动态生成的ID引用框架
实现通过URL引用插件渲染的URI生成
重新评估框架和TopwireContext的责任（框架当前用于为URL反序列化TopwireContext，框架也用于表示渲染过程中的框架。引入第三个实体？）
评估路由增强器以实现漂亮的URL和添加页面参数的清洁方式
上下文VH应将其上下文传播到其子代，也许可以完全删除该参数。这样，就可以删除额外的withContext VH，并轻松地在单个上下文中渲染多个框架，而不必重复该代码。
评估在插件模板内部渲染插件的使用案例，并相应地调整视图辅助程序
评估并可能调整在独立视图上下文中视图辅助程序的使用
实现turbo streams辅助程序
性能评估和优化
评估静态文件缓存选项
通过DI将Extbase控制器标记为标签，以注入返回TopwireTemplateView的视图解析器。允许定义结果视图类，以便能够覆盖框架渲染的片段的位置
使用锚点对滚动恢复问题进行分类
实现将上下文传播到PageLinkBuilder的更简洁解决方案，并将其添加到所有视图辅助函数中，而不仅仅是插件。同时，在UriBuilder中实现，以便在Extbase控制器动作中轻松创建Topwire链接。
允许使用data-turbo-action="advance"更新帧响应中的<title>标签。
允许使用data-turbo-action="advance"更新帧响应中的元标签，例如：<meta name="turbo-visit-control" content="reload">或规范URL。
修复上下文视图辅助函数中的action参数，当动作未缓存时。

topwire / topwire

维护者

详细信息