バージョン

基本的な置換テンプレートの作成

トピックの概要

目的

このトピックでは、テンプレート エンジンを使用して基本的な置換テンプレートを作成する方法を紹介します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。

このトピックの内容

このトピックは、以下のセクションで構成されます。

基本的な置換テンプレートの作成

概要

この例では、基本的な置換テンプレートを作成し、結果を HTML テーブルに追加します

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

前提条件

この手順を実行するには、以下が必要です。

  • テンプレート エンジンで必要な最低限の js ファイルのセットを参照する空の HTML ページ。(詳細については、igTemplating 参照の追加を参照してください)。

手順

以下の手順は、基本的な置換テンプレートを作成する方法を示します。

  1. IG テンプレート エンジンを使用した行テンプレートの追加と適用

    1. サンプル データと行テンプレートをページに追加します。

      JavaScript の場合:

       <script type="text/javascript">
 var employees = [
 { firstName: "Joseph", lastName: "Sommers", age: 17 },
 {  firstName: "Anna", lastName: "Paterson", age: 25}];
 var template = '<tr><td><b>ID: </b>$i</td><td><b>First Name: </b>${firstName}</td><td><b>Last Name: </b>${lastName}</td></tr>';
 </script>

      HTML の場合:

       <body>
 <table id="resultTable" style="border: 1px solid #000;"></table>
 </body>

    2. テンプレートを適用し、結果を HTML テーブルに追加します。

      JavaScript の場合:

       <script type="text/javascript">
 $(document).ready(function () {
       var result = $.ig.tmpl(template, employees);
       $('#resultTable').html(result);
 });
 </script>

  2. (オプション) 結果を確認します。

    ファイルを保存し、ダブル クリックして結果をプレビューします。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

オンラインで表示: GitHub