これはすでにリポジトリに含まれていましたが、スクリプトを検証するために更新されました。
HTMX には、hx- が追加されたお気に入りのキーワードがすべて含まれています。
# General format is hx-[verb]hx-get # HTTP GEThx-post # HTTP POSThx-put # HTTP PUThx-patch # HTTP PATCHhx-delete # HTTP DELETEhx-swap # update content of an elementhx-target # specify element to affecthx-trigger # action that executes function
他にもありますが、これらはこのプロジェクトで使用される主なものです。
簡単なテストとして、./internal/views/components/logo.templ の開始 タグ内に hx-get=\\\"/\\\" と hx-trigger=\\\"click を追加します。 \\\".
ターミナルを開いて次を実行します:
templ generatego run ./cmd/server/main.go
次に、ブラウザに移動して、localhost:[YOUR PORT]/ に移動します。 Gopher をクリックすると、次のことがわかるはずです... あまりにも早く起こったので、おそらく気付かなかったでしょう。大丈夫です。開発者ツールを開き、「インスペクター」タブに移動します。 Gopher をもう一度クリックします。インスペクター タブの HTML が更新されていることがわかります。
これは HTMX の基本です。これにより、私たちが求めているレスポンシブな UI/UX が得られます。さて、hx-swap は名前は単純ですが、その場所については慎重に検討する必要があります。つまり、他の要素と干渉する場所には置かないでください。
例：
// container // end actorすべてのコントロールをボタン上に配置すると、すべてが消去され、更新用のボタンが表示されなくなります。ただし、作業の一部をコンテナに移動すると:
// container// end actor ボタンをクリックすると、コンテナの内部のデータのみが変更されます。ただし、さらに編集するためのボタンが存在します。
補遺
ここで立ち止まる理由は 2 つあります。
まず、htmx を使用して、そのままサイトをカスタマイズできます。次に、http.Response を使用して HTML コードを返すことができます。拡張により、templ コンポーネントも渡すことができます。これがどうなるかわかりますか？近日公開
全体を再構築し、機能を go handlerFunc() に移動します。
","image":"http://www.luping.net/uploads/20241005/17281148536700f0a57a72a.png","datePublished":"2024-11-07T13:21:30+08:00","dateModified":"2024-11-07T13:21:30+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」HTMX を GO に追加する
2024 年 11 月 7 日に公開ブラウズ：930
HTMX は intercooler.js の後継であり、API を作成することなく HTTP コマンドで HTML を拡張するために使用されます。さて、最初に抽象化レイヤーを削除すると言いましたが、私はどちらかというとシステム/ツール プログラマーなので、下で実際に何が起こっているかを把握するまでは、まだいくつかの抽象化が必要です。
基本的な考え方
HTMX は、要素を変更するために AJAX コマンドをデプロイします。これは ReactJs の仕組みと似ています。 ReactJs はコンテンツの更新を可能にし、HTML の更新は HTMX によって実現されます。
HTMXのインポート
簡単なワンライナーが ./internal/views/layout.templ
要素に追加されます。
これはすでにリポジトリに含まれていましたが、スクリプトを検証するために更新されました。
HTMXの使用
HTMX には、hx- が追加されたお気に入りのキーワードがすべて含まれています。
# General format is hx-[verb] hx-get # HTTP GET hx-post # HTTP POST hx-put # HTTP PUT hx-patch # HTTP PATCH hx-delete # HTTP DELETE hx-swap # update content of an element hx-target # specify element to affect hx-trigger # action that executes function他にもありますが、これらはこのプロジェクトで使用される主なものです。
簡単なテストとして、./internal/views/components/logo.templ の開始
タグ内に hx-get="/" と hx-trigger="click を追加します。 ".
ターミナルを開いて次を実行します:
templ generate go run ./cmd/server/main.go次に、ブラウザに移動して、localhost:[YOUR PORT]/ に移動します。 Gopher をクリックすると、次のことがわかるはずです... あまりにも早く起こったので、おそらく気付かなかったでしょう。大丈夫です。開発者ツールを開き、「インスペクター」タブに移動します。 Gopher をもう一度クリックします。インスペクター タブの HTML が更新されていることがわかります。
HX-スワップ
これは HTMX の基本です。これにより、私たちが求めているレスポンシブな UI/UX が得られます。さて、hx-swap は名前は単純ですが、その場所については慎重に検討する必要があります。つまり、他の要素と干渉する場所には置かないでください。
例：
// container // end actor// end-containerすべてのコントロールをボタン上に配置すると、すべてが消去され、更新用のボタンが表示されなくなります。ただし、作業の一部をコンテナに移動すると:
// container// end-container// end actor ボタンをクリックすると、コンテナの内部のデータのみが変更されます。ただし、さらに編集するためのボタンが存在します。
補遺
ここで立ち止まる理由は 2 つあります。
まず、htmx を使用して、そのままサイトをカスタマイズできます。次に、http.Response を使用して HTML コードを返すことができます。拡張により、templ コンポーネントも渡すことができます。これがどうなるかわかりますか？近日公開
全体を再構築し、機能を go handlerFunc() に移動します。
リリースステートメント この記事は次の場所に転載されています: https://dev.to/caffeineordeath/adding-htmx-to-go-2cah?1 侵害がある場合は、[email protected] に連絡して削除してください。最新のチュートリアル もっと>
\ "while（1）vs。for（;;）：コンパイラの最適化はパフォーマンスの違いを排除しますか？\"while（1）vs。for（;;）：速度の違いはありますか？ loops？ 回答： では、ほとんどの最新のコンパイラでは、（1）と（;;）。コンパイラー： perl： の両方が（1）と（;;）が同じオプコードをもたらします。 1 入力 - > 2を入力します 2 NextSt...プログラミング 2025-05-07に投稿しました中国語を勉強する
- 1 「歩く」は中国語で何と言いますか？ 走路 中国語の発音、走路 中国語学習
- 2 「飛行機に乗る」は中国語で何と言いますか？ 坐飞机 中国語の発音、坐飞机 中国語学習
- 3 「電車に乗る」は中国語で何と言いますか？ 坐火车 中国語の発音、坐火车 中国語学習
- 4 「バスに乗る」は中国語で何と言いますか？ 坐车 中国語の発音、坐车 中国語学習
- 5 中国語でドライブは何と言うでしょう？ 开车 中国語の発音、开车 中国語学習
- 6 水泳は中国語で何と言うでしょう？ 游泳 中国語の発音、游泳 中国語学習
- 7 中国語で自転車に乗るってなんて言うの？ 骑自行车 中国語の発音、骑自行车 中国語学習
- 8 中国語で挨拶はなんて言うの？ 你好中国語の発音、你好中国語学習
- 9 中国語でありがとうってなんて言うの？ 谢谢中国語の発音、谢谢中国語学習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3
![\\\"Adding](\\\"/uploads/20241005/17281148536700f0a57c124.jpg\\\")
