alpinejsに久しぶりに触ってました。
で、以前までも毎回困っていたx-dataのnot define問題にまたぶち当たりました。
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script defer src="{{ 'app.js' | asset_url }}"></script>
<div x-data="app()">みたいな感じで。 ※初しょっぴふぁいです
でも、app not defineみたいなエラーがずっと出て困り果ててました。
構文エラーはあらかた潰した筈なんだけど…。
x-data=”app”とx-data=”app()”の違いも分かってるけど分かってないですｗ
で、app.jsが読み込まれて無いんじゃね？って感想に落ち着き、deferについて調べた、確認した。
※数ヶ月前にも調べたような記憶はあるけど覚えてない
・ 読み込み待たずに次に行くよ！
・でも初期化処理は読み込まれた順番を待つよ！
ははーーん！
閃いたね。
<script defer src="{{ 'app.js' | asset_url }}"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="app()">appを定義していたスクリプトとalpinejsの読み込み順を逆にしました。
読み込みタイミング的な話だったら、これでapp.jsの読み込みが完了するまでalpinejsの初期化処理も発動しないだろ？的な。
普通に正解だった。
こんな小ボケに１時間以上かかりました。。。
いや、他のエラーもあったから…ほら？
app.jsの方でもalpinejsのメソッドとか使う場合どうすればいいんだろ？
と一瞬思いましたが全部終わった後にinit処理を用意すればいいだけっすね。
おっさんPHPerには慣れない所作です。
気になったこと
今回、読み込みとか色々調べてるウチに気にある事がありました。
import です。
scriptタグで読み込むのでは無く、js内でimport hoge from https://～～ って感じで書く方式もあるのね。
何か細かい制御も色々出来そうだし、気になるので今後調べていきたいと思います！
以上、忙し過ぎてブログとか書いてる暇はないうえに、
明日はバイト休みだけどweb制作打ち合わせがあるのでこんな時間まで準備してるおっさんでした！
コメント