这篇文章主要介绍了使用 htmx 构建 Trello 克隆应用的过程，包含主要观点、关键信息和重要细节如下：

• 主要观点：展示 htmx 可用于简单实现看似复杂的功能，通过构建 Trello 克隆应用来回应“用 htmx 构建类似 Trellix 的东西很难”的观点。

• 关键信息：

  • 使用 htmx 实现创建新看板、重命名看板、创建车道、创建卡片、重新排序车道内卡片、在车道间移动卡片、删除卡片等功能。
  • 介绍了在构建过程中遇到的问题及解决方案，如处理表单提交后的重定向、缓存、输入框聚焦等。
  • 对比了使用 hyperscript 和 Alpine.js 实现某些功能的方式。

• 重要细节：

  • 创建看板：通过POST请求创建看板，可使用hx-boost使表单异步，处理重定向时需考虑浏览器的回退按钮行为，可通过设置hx-history="false"避免缓存整个页面。
  • 重命名看板：通过点击看板名称显示可编辑的输入框，使用hx-get和hx-put实现名称修改，结合 JavaScript 事件处理取消编辑操作，通过ViewData更新页面标题。
  • 创建车道：使用 hyperscript 实现“添加车道”按钮的交互效果，包括显示输入框、聚焦输入框、提交表单创建车道等，处理验证和隐藏输入框等情况，可使用HX-Trigger和HX-Reswap响应头控制请求和交换方式。
  • 创建卡片：结构与创建车道类似，通过点击按钮显示输入框，提交表单创建卡片，处理卡片添加和删除时的相关交互。
  • 重新排序车道内卡片：使用 SortableJS 库处理拖动和放下事件，通过提交包含卡片 ID 的表单来记录新的排序顺序。
  • 在车道间移动卡片：利用 SortableJS 的“groups”功能实现，通过设置特定的事件来避免不必要的请求。
  • 删除卡片：使用hx-delete删除卡片，指定hx-target和hx-params控制删除操作。
  • 卡片计数：通过 out-of-band 交换更新页面上的卡片数量徽章，根据创建、删除和排序卡片的事件来更新每个车道的卡片数量。
  • 与其他库的对比：介绍了使用 Alpine.js 实现标题编辑的方式，与 hyperscript 进行对比，展示了两者的特点。

总之，通过这些示例展示了 htmx 在构建前端应用中的简单性和实用性，同时也提到了一些细节和可能的改进方向。