HTMX Fragment & Router

TsgcHTMX_Fragment / TsgcHTMX_Router — 构建带外 htmx 替换载荷以实现精准 DOM 更新,并将 URL 模式路由到 Delphi 处理程序,无需编写 if/else 链。

TsgcHTMX_Fragment & TsgcHTMX_Router

TsgcHTMX_Fragment 为指定的 DOM 元素 id 和替换策略构造格式正确的带外 htmx 替换字符串。TsgcHTMX_Router 将传入的 HTTP 请求分发到已注册的 Delphi 处理方法,省去手动解析 URL 的工作。

组件类

TsgcHTMX_Fragment, TsgcHTMX_Router

角色

OOB 替换 & 请求路由

语言

Delphi, C++ Builder, .NET

构建片段,路由请求

使用 TsgcHTMX_Fragment 构造针对特定 DOM 元素 id 的带外 htmx 替换字符串。使用 TsgcHTMX_Router 将传入的 HTTP 请求分发到已注册的处理方法,无需编写 if/else 链。

uses
  sgcHTMX_Fragment, sgcHTMX_Router;

// Build and broadcast an OOB fragment:
var
  oFrag: TsgcHTMX_Fragment;
begin
  oFrag := TsgcHTMX_Fragment.Create(nil);
  try
    oFrag.TargetID   := 'kpi-revenue';
    oFrag.SwapMethod := 'innerHTML';
    oFrag.Content    := FormatFloat('#,##0', FRevenue);
    oHTMX.BroadcastFragment(oFrag.Fragment);
  finally
    oFrag.Free;
  end;
end;

// Route requests with TsgcHTMX_Router:
var
  oRouter: TsgcHTMX_Router;
begin
  oRouter := TsgcHTMX_Router.Create(nil);
  oRouter.AddRoute('GET',  '/customers',     HandleCustomers);
  oRouter.AddRoute('POST', '/customer/save', HandleCustomerSave);
  oRouter.HandleRequest(AContext, ARequest, AResponse);
end;
TsgcHTMX_Fragment *oFrag = new TsgcHTMX_Fragment(NULL);
try
{
  oFrag->TargetID   = "kpi-revenue";
  oFrag->SwapMethod = "innerHTML";
  oFrag->Content    = FormatFloat("#,##0", FRevenue);
  oHTMX->BroadcastFragment(oFrag->Fragment);
}
__finally { delete oFrag; }

TsgcHTMX_Router *oRouter = new TsgcHTMX_Router(NULL);
oRouter->AddRoute("GET",  "/customers",     HandleCustomers);
oRouter->AddRoute("POST", "/customer/save", HandleCustomerSave);
oRouter->HandleRequest(AContext, ARequest, AResponse);
var frag = new TsgcHTMX_Fragment();
frag.TargetID   = "kpi-revenue";
frag.SwapMethod = "innerHTML";
frag.Content    = revenue.ToString("N0");
htmxEngine.BroadcastFragment(frag.Fragment);

var router = new TsgcHTMX_Router();
router.AddRoute("GET",  "/customers",     HandleCustomers);
router.AddRoute("POST", "/customer/save", HandleCustomerSave);
router.HandleRequest(context, request, response);

关键属性和方法

最常用的成员。

TsgcHTMX_Fragment.TargetID

要替换的 DOM 元素的 id;对应 htmx 的 hx-swap-oob 目标。

TsgcHTMX_Fragment.SwapMethod

htmx 替换策略:innerHTMLouterHTMLbeforebeginafterend 等。

TsgcHTMX_Fragment.Content

注入目标的新 HTML 内容;可以是简单字符串,也可以是任意 sgcHTML 组件的输出。

TsgcHTMX_Fragment.Fragment

只读属性;返回已构造完整的 OOB 替换字符串,可直接传递给 BroadcastFragment 或作为 HTTP 响应体返回。

TsgcHTMX_Router.AddRoute

将 URL 模式与 HTTP 方法组合注册到 Delphi 处理程序或方法。

TsgcHTMX_Router.HandleRequest

将传入请求与所有已注册路由进行匹配,并调用对应处理程序;若无匹配路由则返回 False

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 60+ 组件的完整功能矩阵。
下载免费试用版30 天试用版包含 60.HTML 演示项目。
价格包含完整源代码的单用户、团队和站点许可证。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web UI。