又出来一个新的玩意儿，Laravel Htmx

牛铁柱

Laravel htmx 是 Maurizio Bonani 的一个包，它为您提供了一种使用 htmx 的好方法，htmx 是一个库，允许您直接从 HTML 访问现代浏览器功能，而不是使用 JavaScript：

htmx 使您可以使用属性直接在 HTML 中访问 AJAX、CSS 转换、WebSocket 和服务器发送事件，因此您可以利用超文本的简单性和强大功能构建现代用户界面

htmx 很小（~14k min.gz’d）、无依赖、可扩展、兼容 IE11，并且与 React 相比，代码库大小减少了 67%

让我们看看 Laravel htmx 包在自述文件中概述的功能：

网页请求

您可以从容器中解析 HtmxRequest 的实例，该实例提供了读取 htmx 特定请求标头的快捷方式。

use Mauricius\LaravelHtmx\Http\HtmxRequest;
 
Route::get('/', function (HtmxRequest $request)
{
    // always true if the request is performed by Htmx
    $request->isHtmxRequest();
    // indicates that the request is via an element using hx-boost
    $request->isBoosted();
    // the current URL of the browser
    $request->getCurrentUrl();
    // true if the request is for history restoration after a miss in the local history cache
    $request->isHistoryRestoreRequest()
    // the user response to an hx-prompt
    $request->getPromptResponse();
    //     the id of the target element if it exists
    $request->getTarget();
    // the name of the triggered element if it exists
    $request->getTriggerName();
    // the id of the triggered element if it exists
    $request->getTriggerId();
});

网页响应

HtmxResponseClientRedirect

当 htmx 收到带有 HX-Redirect 标头的响应时，它可以触发客户端重定向。 HtmxResponseClientRedirect 可以轻松触发此类重定向。

use Mauricius\LaravelHtmx\Http\HtmxResponseClientRedirect;
 
Route::get('/', function (HtmxRequest $request)
{
    return new HtmxResponseClientRedirect('/somewhere-else');
});

HtmxResponseClientRefresh

当 htmx 收到带有 HX-Refresh 标头的响应时，它将触发页面重新加载。 HtmxResponseClientRefresh 是一个自定义响应类，允许您发送此类响应。它不需要任何参数，因为 htmx 会忽略任何内容。

use Mauricius\LaravelHtmx\Http\HtmxResponseClientRefresh;
 
Route::get('/', function (HtmxRequest $request)
{
    return new HtmxResponseClientRefresh();
});

HtmxResponseStopPolling

使用轮询触发器时，htmx 在遇到特殊 HTTP 状态代码 286 的响应时将停止轮询。 HtmxResponseStopPolling 是具有该状态代码的自定义响应类。

use Mauricius\LaravelHtmx\Http\HtmxResponseStopPolling;
 
Route::get('/', function (HtmxRequest $request)
{
    return new HtmxResponseStopPolling();
});

对于所有剩余的可用标头，您可以使用 HtmxResponse 类。

use Mauricius\LaravelHtmx\Http\HtmxResponse;
 
Route::get('/', function (HtmxRequest $request)
{
    return with(new HtmxResponse())
        ->location($location) // Allows you to do a client-side redirect that does not do a full page reload
        ->pushUrl($url) // pushes a new url into the history stack
        ->replaceUrl($url) // replaces the current URL in the location bar
        ->reswap($option) // Allows you to specify how the response will be swapped
        ->retarget($selector); // A CSS selector that updates the target of the content update to a different element on the page
});

此外，您可以使用 addTrigger 方法触发客户端事件。

use Mauricius\LaravelHtmx\Http\HtmxResponse;
 
Route::get('/', function (HtmxRequest $request)
{
    return with(new HtmxResponse())
        ->addTrigger($event)
        ->addTriggerAfterSettle($event)
        ->addTriggerAfterSwap($event);
});

您可以多次调用这些方法来触发多个事件。

使用 Htmx 渲染刀片片段

该库还提供了基本的 Blade 扩展来渲染模板片段。

该库提供了两个新的 Blade 指令： @fragment 和 @endfragment 。您可以使用这些指令来指定模板中的内容块并仅呈现该内容位。例如：

{{-- /contacts/detail.blade.php  --}}
<html>
    <body>
        <div hx-target="this">
            @fragment("archive-ui")
                @if($contact->archived)
                    <button hx-patch="/contacts/{{ $contact->id }}/unarchive">Unarchive</button>
                @else
                    <button hx-delete="/contacts/{{ $contact->id }}">Archive</button>
                @endif
            @endfragment
        </div>
        <h3>Contact</h3>
        <p>{{ $contact->email }}</p>
    </body>
</html>

通过在模板中定义此片段，我们现在可以渲染整个模板：

Route::get('/', function ($id) {
    $contact = Contact::find($id);
 
    return View::make('contacts.detail', compact('contact'));
});

或者，我们可以使用 \Illuminate\View\View 类中定义的 renderFragment 宏仅渲染模板的 archive-ui 片段：

Route::patch('/contacts/{id}/unarchive', function ($id) {
    $contact = Contact::find($id);
 
    // The following approaches are equivalent
 
    // Using the View Facade
    return \Illuminate\Support\Facades\View::renderFragment('contacts.detail', 'archive-ui', compact('contact'));
 
    // Using the view() helper
    return view()->renderFragment('contacts.detail', 'archive-ui', compact('contact'));
 
    // Using the HtmxResponse Facade
    return \Mauricius\LaravelHtmx\Facades\HtmxResponse::renderFragment('contacts.detail', 'archive-ui', compact('contact'));
 
    // Using the HtmxResponse class
    return with(new \Mauricius\LaravelHtmx\Http\HtmxResponse())
        ->renderFragment('contacts.detail', 'archive-ui', compact('contact'));
});

OOB 交换支持

htmx 通过使用 hx-swap-oop 返回多个部分响应来支持更新多个目标。使用此库，您可以使用 HtmxResponse 作为返回类型来返回多个片段。

例如，假设我们想要使用 /todos/{id} 的 PATCH 请求将待办事项标记为已完成。通过相同的请求，我们还想在页脚中更新剩余的待办事项数量：

{{-- /todos.blade.php  --}}
<html>
    <body>
        <main hx-target="this">
            <section>
                <ul class="todo-list">
                    @fragment("todo")
                        <li id="todo-{{ $todo->id }}" @class(['completed' => $todo->done])>
                            <input
                                type="checkbox"
                                class="toggle"
                                hx-patch="/todos/{{ $todo->id }}"
                                @checked($todo->done)
                                hx-target="#todo-{{ $todo->id }}"
                                hx-swap="outerHTML"
                            />
                            {{ $todo->name }}
                        </li>
                    @endfragment
                </ul>
            </section>
            <footer>
                @fragment("todo-count")
                    <span id="todo-count" hx-swap-oob="true">
                        <strong>{{ $left }} items left</strong>
                    </span>
                @endfragment
            </footer>
        </main>
    </body>
</html>

我们可以使用 HtmxResponse 返回多个片段：

Route::patch('/todos/{id}', function ($id) {
    $todo = Todo::find($id);
    $todo->done = !$todo->done;
    $todo->save();
 
    $left = Todo::where('done', 0)->count();
 
    return HtmxResponse::addFragment('todomvc', 'todo', compact('todo'))
        ->addFragment('todomvc', 'todo-count', compact('left'));
});

在 GitHub 上了解有关 Laravel htmx 包的更多信息。

https://github.com/mauricius/laravel-htmx

本网站的服务器由提供