HTMX入門
logging
htmx.loggerでロガーを設定すると、すべてのイベントが記録されます。これは、トラブルシューティングに非常に役立ちます。
htmx.logger = function(elt, event, data) {
if(console) {
console.log(event, elt, data);
}
}
htmxのlogAll関数
HTMXを使用した宣言的かつイベント駆動型プログラミングは、素晴らしく、非常に生産的ですが、 命令的なアプローチと比較した場合の1つの欠点は、デバッグするのが難しいことです。
たとえば、HTMXにおいて何かが動作しない理由を理解することは、バグを解決すること以上に難しい場合があります。
HTMXが提供するデバッグツールの一つは、htmx.logall() メソッドです。これにより、HTMXがトリガーするすべてのイベントを記録し、ライブラリが何をしているのかを正確に確認することができます。
htmx.logAll();
htmxのmonitorEvents関数
もちろん、HTMXがイベントを発行しない理由はわかりません。 また、どのDOMに対してどのイベントが発行しないかもわからないかもしれません。
このような場合は、monitorEventsメソッドを活用できます。
monitorEventsは引数で指定したDOM要素を常に監視し、要素上で
発生しているすべてのイベントが吐き出されます。
monitorEvents(htmx.find("#theElement"));
これにより、何が起こっているのかを正確に見ることができます。
ただし、この機能はブラウザのコンソールからのみ機能することに注意してください。 ページのスクリプトタグに埋め込むことはできません。
デモ
時々、バグをデモンストレーションしたり、使用法を明確にしたりするために、JavaScriptスニペットを使用できるのは素晴らしいことです jsfiddleのようなサイト。簡単なデモ作成を容易にするために、HTMXはデモスクリプトをホストします インストールするサイト：
次のスクリプトタグをデモ/フィドル/何でも追加するだけです。
<script src="https://demo.htmx.org"></script>
このヘルパーを使用すると、URL属性を備えたテンプレートタグを追加してどのURLを示すことにより、モック応答を追加できます。 そのURLに対する応答は、テンプレートのinnerhtmlであり、モック応答を簡単に構築できます。あなたはできる 遅延属性を使用して応答に遅延を追加します。これは、ミリ秒数を示す整数である必要があります 遅延する
{}構文を使用して、テンプレートに単純な式を埋め込むことができます。
これはデモにのみ使用されるべきであり、長期間働くことを決して保証されていないことに注意してください それは常に最新のバージョンのHTMXとHyperScriptをつかむでしょう！
demoの例
以下は、動作中のコードの例です。
<!-- load demo environment --> <script src="https://demo.htmx.org"></script> <!-- post to /foo --> <button hx-post="/foo" hx-target="#result"> Count Up </button> <output id="result"></output> <!-- respond to /foo with some dynamic content in a template tag --> <script> globalInt = 0; </script> <template url="/foo" delay="500"> <!-- note the url and delay attributes --> ${globalInt++} </template>
page:https://minegishirei.hatenablog.com/entry/2024/05/21/183137
