README

Yii3 框架 htmx 简单扩展

此 Yii 框架扩展封装了基本功能 [htmx]，使在 Yii 应用程序中使用它变得极其简单。

您可以在 yii3-demo-htmx 应用程序中查看示例。

安装

通过 composer 安装此扩展是首选方式。

php composer.phar require nkondrashov/yii3-htmx "^0.2"

将 HTMXMiddleware.php 添加到路由器。

->middleware(HTMXMiddleware::class)

在主布局或 AppAsset 中注册资产

$assetManager->register(HTMXAsset::class);

警告！

对于成功的 POST 请求，将以下属性添加到 <body> 标签：hx-headers='{"X-CSRF-Token":"<?=$csrf; ?>"}'。例如：

<body hx-headers='{"X-CSRF-Token":"<?=$csrf; ?>"}'>

安装资产

使用 npm-asset 包管理器。

在应用程序根目录下运行以下命令。

npm i htmx.org@1.9.10

通用用法

示例

简单

<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);

$htmx = HTMX::make($tag)
            ->request(Yiisoft\Http\Method::DELETE, '/item/delete/' . $todo->id)
            ->setSwap('none')
            ->runOnClick();

if (!$todo->is_complete) {
    $htmx->addConfirm('Are you sure?');
}

echo $htmx;
 ?>

<?= HTMX::make(Yiisoft\Html\Html::tag('div'))
        ->request(Yiisoft\Http\Method::GET, '/item/index')
        ->runOnCustomEvent('someCustomEvent', 'someCustomEvent2')
        ->runOnLoad();?>

更原生

<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);

$htmx = HTMX::make($tag)
            ->request(Yiisoft\Http\Method::DELETE, '/item/delete/' . $todo->id)
            ->addTriggers('click')
            ->setSwap('none');

if (!$todo->is_complete) {
    $htmx->addConfirm('Are you sure?');
}

echo $htmx;
 ?>

<?= HTMX::make(Yiisoft\Html\Html::tag('div'))
        ->request(Yiisoft\Http\Method::GET, '/item/index')
        ->addTriggers('load','someCustomEvent from:body', 'someCustomEvent2 from:body');
?>

最原生

<?php
$tag = Yiisoft\Html\Html::button('[ X ]']);

$htmx = HTMX::make($tag)
            ->setHx('delete', '/item/delete/' . $todo->id)
            ->setHx('trigger', 'click')
            ->setHx('swap', 'none');

if (!$todo->is_complete) {
    $htmx->setHx('conf', 'Are you sure?');
}

echo $htmx;
 ?>

<?= HTMX::make(Yiisoft\Html\Html::tag('div'))
        ->setHx('get', '/item/index')
        ->setHx('trigger', 'load, someCustomEvent from:body, someCustomEvent2 from:body');
?>

在响应中发送 htmx 头部

//Definition:
...
    public function __construct(private HTMXHeaderManager $headerManager)
    {}
...

//In code:
$this->headerManager->triggerCustomEventAfterSwap('updateList');
//or native:
$this->headerManager->sendHXHeader('Trigger', 'updateList');

//Detect htmx request:
if ($this->headerManager->isHtmxRequest()) {
    //Example: This request without htmx header
}

//Get data from header:
$value = $this->headerManager->getRequestHeader('Hx-Trigger-Name');