intercooler.js → htmx 迁移指南

本指南的目的是：

¥The purpose of this guide is to:

• 映射 Intercooler 中可用的等效 htmx 属性、标头、事件、方法等

  ¥map the equivalent htmx attributes, headers, events, methods, etc. that are available in Intercooler

• 在 htmx 核心中没有直接等效项的情况下提供解决方法以实现相同/相似的结果（通常通过 htmx 扩展或通过 hyperscript)

  ¥provide workarounds to achieve the same/similar outcome in the cases where there is no direct equivalent in htmx core (usually via an htmx extension or via hyperscript)

• 高亮无法（目前）通过核心 htmx、任何现有扩展或 hyperscript 优雅解决的差距

  ¥highlight gaps which can’t (yet) be elegantly solved via core htmx, any of the existing extensions or hyperscript

开始之前

¥Before you begin

值得注意的是 Intercooler 打算做的事情和 htmx 正在做的事情之间的方法差异。

¥It is worth noting the difference in approach between what Intercooler set out to do and what htmx is doing.

Intercooler 尝试为其大多数功能提供自定义 html 属性。这在其较长的属性列表中显而易见，其中许多属性本质上可以被描述为便利或以客户端为中心。

¥Intercooler tried to provide custom html attributes for most of it’s functionality. This is evident in it’s longer list of attributes, many of which could be described as convenience or client-side-focused in nature.

htmx 遵循尝试保持核心较小的方法，使用一组较小的可用属性，主要侧重于内容加载和交换。

¥htmx follows the approach of trying to keep the core small, with a smaller set of available attributes that are mostly focused on content loading and swapping.

此功能主要以两种方式增强：

¥This capability is augmented in primarily 2 ways:

1. 扩展。htmx 扩展框架允许自定义扩展/插件实现特定功能。一个例子是 Intercooler 中嵌入的依赖机制，它不存在于 htmx 核心中。但可通过 扩展 获得。还有其他扩展可以实现 Intercooler 无法实现的新行为，例如 preload 扩展

   ¥Extensions. The htmx extension framework allows for custom extensions/plugins to achieve specific functionality. An example of this is the dependencies mechanism baked into Intercooler, which is not present in htmx core. but available via an extension. There are also other extensions which enables new behavior that Intercooler was not capable of out the box, e.g. the preload extension

2. 使用 htmx 事件系统和 vanilla javascript、alpine.js 或 hyperscript。Hyperscript 是一种小型开放脚本语言，旨在嵌入 HTML，灵感来自 HyperTalk，是 htmx 的配套项目。

   ¥Using the htmx events system with vanilla javascript, alpine.js or hyperscript. Hyperscript is a small, open scripting language designed to be embedded in HTML, inspired by HyperTalk and is a companion project of htmx.

htmx 还包含 Intercooler 中不存在的功能。这超出了本指南的范围。

¥htmx also contains functionality which is not present in Intercooler. That is outside of the scope of this guide.

最后，值得注意的是，这仍然是一项正在进行的工作，可能会随着时间的推移而发生变化。

¥Finally, it’s worth noting that this is still a work in progress and is liable to change over time.

迁移信息

¥Migration Information

本指南的其余部分以一组表格的形式渲染，每个表格都试图将 Intercooler 的以下常见功能区域映射到 htmx 等效项上：

¥The rest of this guide is laid out as a set of tables, each of which attempts to map the following common functional areas of Intercooler onto the htmx equivalents:

• 属性

  ¥Attributes

• 请求参数

  ¥Request Parameters

• 请求标头

  ¥Request Headers

• 响应标头

  ¥Response Headers

• 事件

  ¥Events

• JavaScript API 方法

  ¥Javascript API Methods

• 元标记

  ¥Meta Tags

属性

¥Attributes

注意：对于某些 Intercooler 属性（主要是客户端特定属性，例如 ic-action 和相关属性），没有直接的 htmx 等效项。相反，有一种称为 hyperscript 的小型表达性语言可用（参见 http://hyperscript.org），它旨在嵌入 HTML 中并充当 htmx 的无缝伴侣。它允许你实现与某些特别是客户端重点 Intercooler 属性相同的行为，但方式更灵活、更开放。

¥Note: For certain Intercooler attributes (mostly client-side specific attributes, e.g. the ic-action and associated attributes) there are no direct htmx equivalents. Instead, there is a small, expressive language available called hyperscript, (see http://hyperscript.org), which is designed to be embedded in HTML and acts as a seamless companion to htmx. It allows you to achieve the same behavior as some of especially the client-side focused Intercooler attributes, but in a more flexible and open manner.

请参阅 htmx 关于 hyperscript 的文档 以获取实际示例，以及有关 hyperscipt 背后哲学的更多信息。

¥See the htmx documentation on hyperscript for practical examples, as well as more on the philosophy behind hyperscipt.

请求参数

¥Request parameters

请求标头

¥Request headers

响应标头

¥Response headers

事件

¥Events

注意：所有 htmx 事件 都在 Camel 和 Kebab 外壳中触发。

¥Note: All htmx events are fired in both Camel and Kebab casing.

JavaScript API 方法

¥JavaScript API methods

元标签

¥Meta tags