バージョン

複合プロパティ置換テンプレートの作成

トピックの概要

目的

このトピックでは、テンプレート エンジンを使用して複合プロパティ置換テンプレートを作成する方法を紹介します。

前提条件

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

このトピックの内容

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

複合プロパティ置換テンプレートの作成

概要

この例では、複合置換テンプレートを作成し、結果を HTML テーブルに追加します。複合プロパティ置換テンプレートは、サブプロパティ firstName と lastName を使用し、personal プロパティから値を取得します。

プレビュー

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

前提条件

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

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

手順

ここでは、複合プロパティ置換テンプレートを作成する手順について説明します。

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

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

      JavaScript の場合:

       <script type="text/javascript">
 var employees = [
     { personal: { 
         firstName: "Tom",
         lastName: "Wickens" 
         },
         position: "Team Lead"
     },
     { personal: { 
         firstName: "Jessica",
         lastName: "Alba"
         },                  
       position: 'Architect'
     }];
 var template = '<tr><td><b>First Name: </b>${personal.firstName}</td>' + '<td><b>Last Name: </b>${personal.lastName}</td>' + '<td><b>Position: </b>${position}</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