Laravel Htmx：一个允许你直接从 HTML 访问现代浏览器功能的库

Laravel  /  管理员 发布于 1年前   340

Laravel htmx 是一个由 Maurizio Bonani 制作的软件包，它为你提供了使用 htmx 的好方法。

htmx 是一个允许你直接从 HTML 访问现代浏览器功能的库，而不是使用 JavaScript：

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

htmx 体积小（~14k min.gz'd）、无依赖性、可扩展、兼容 IE11，
与 react 相比，代码量减少了 67%

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


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();
});

Htmx 响应

HtmxResponse 客户端重定向

当收到带有 HX-Redirect 头信息的响应时，htmx 可以触发客户端重定向。

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 宏，

只渲染模板的存档-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

  • 上一条：
    Clash for Windows作者删库跑路了，github已404
    下一条：
    github上最健康的程序员作息表分享

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客