アルパイン.HTMLデータの表示

このチュートリアルでは、アルパインを使用します.APIからデータをロードして、それからHTMLテーブルのそのデータを表示するJS.我々は、無料で使用されますSportsDB API いくつかの関連チームのデータと一緒に英語プレミアリーグからチームのリストをロードします.
始めましょう、このチュートリアルの目的のために、あなたはCDNを通してアルプスを読み込むことができます:

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

今、ラッパーで始まるHTMLマークアップのために<div> コンポーネント

<div
    x-cloak
    x-data="{teams: [], 'isLoading': true}"
    x-init="fetch('https://www.thesportsdb.com/api/v1/json/1/lookup_all_teams.php?id=4328')
    .then(response => response.json())
    .then(response => { teams = response.teams; isLoading = false; console.log(response.teams); })"
>
<!-- Table will go here -->
</div>

x-cloak アルパインが完全にロードされるまで、要素を隠します、この例では、それはx-show 要素を評価して隠します.のためにx-cloak 動作する属性には、次のCSSを含める必要があります.

[x-cloak] {
  display: none !important;
}

x-data HTMLのチャンクをアルパインコンポーネントとして定義し、そのコンポーネントを参照するための反応データを提供します.この場合、チームデータを配列とコンポーネントのローディング状態に格納します.x-init はデータを取得し、x-data コンポーネントを処理してレンダリングする前に.データ自体は、JavaScriptfetch() 英語プレミアリーグチームのSportsDB APIエンドポイントを使用する方法.
成功した場合は、次のようにして、ブラウザのコンソールにデータがログ出力されます.

このデータをHTMLテーブルに出力できます.

<h1 x-show="isLoading">Loading...</h1>
<table x-show="!isLoading">
    <tr>
        <th>Team</th>
        <th>Founded</th>
        <th>Stadium</th>
        <th>Capacity</th>
    </tr>
    <template x-for="team in teams" :key="team.idTeam">
        <tr>
        <td x-text="team.strTeam"></td>
        <td x-text="team.intFormedYear"></td>
        <td x-text="team.strStadium"></td>
        <td x-text="team.intStadiumCapacity"></td>
        </tr>
    </template>
</table>

x-show の可視性を切り替える<h1> テキスト読み込みと<table> の値に基づいてisLoading . では、x-for 各チームを通じてループするディレクティブx-text 個々のテーブル行に.The <template> ここで使用する要素は、ページをロードするときにすぐにレンダリングされないHTMLを保持する機構です.
それは、このチュートリアルのためのすべてで、我々は、アルディンのv 3で利用可能な15ディレクティブの6を使用しています.jsフレームワークを探索することに興味があるならばAlipine.js tutorials .