Ignite UI for Blazor – igTemplating の使い方

Ignite UI for Blazor が提供する各種コンポーネントのカスタマイズにあたっては、JavaScript による実装で DOM の生成を必要とする場合があります。

そのような場合、以下のように HTML 標準の DOM API を駆使して生成するのが、まずは基本になります。

igRegisterScript("...", (context) => {
  const container = document.createElement("div");
  container.classList.add("container");
  container.classList.add("stack");
  container.classList.add("vertical");

  const firstLine = document.createElement("div");
  container.appendChild(firstLine);
  firstLine.classList.add("first-name");
  firstLine.textContent = context.item.firstName;

  const secondLine = document.createElement("div");
  container.appendChild(secondLine);
  firstLine.classList.add("last-name");
  firstLine.textContent = context.item.lastName;

  return container;
}, false);

上記スクリプトで生成される DOM は以下のような HTML に相当します。

<div class="container stack vertical">
    <div class="first-name">
        Jhon
    </div>
    <div class="last-name">
        Smith
    </div>
</div>

生成される DOM はそこまで複雑ではないですが、それを生成する冒頭の JavaScript プログラムは行数も多く、一読しただけでは最終的な DOM 構造も想像しにくいです。

このような場合に、Ignite UI for Blazor から提供されている igTemplating オブジェクトを使用すると、文字列に基づくテンプレートから簡潔に DOM 構造を生成することができます。

igTemplating オブジェクトには html というプロパティが公開されており、これと JavaScript の文字列補間の機能が組み合わされることで、HTML の構文で DOM 生成が可能となります。具体的には、冒頭のスクリプトと同等の DOM 生成は、igTemplating を使うと、以下のように実装できます。

igRegisterScript("...", (context) => {
  return igTemplating.html`<div class="container stack vertical">
    <div class="first-name">
        ${context.item.firstName}
    </div>
    <div class="last-name">
        ${context.item.lastName}
    </div>
</div>`;
}, false);

上記のとおり、igTemplating を使用すると、極めて直感的に DOM 構造を記述でき、値の埋め込みも JavaScript の文字列補間構文のまま、${…} の間に埋め込む値の式を記述するだけで済みます。

igTemplating.html`….` が返す値は、DOM 要素オブジェクトではなく、”テンプレート結果” というデータ構造です。Ignite UI for Blazor のコンポーネントはテンプレート結果を受け取るとそこから DOM を生成して使用するようになっています。

以上、Ignite UI for Blazor の利用にあたって JavaScript プログラムによる DOM 生成が必要な場合は、igTemplating オブジェクトを利用することで、API 呼び出しを駆使することなく、直感的な HTML 構文の文字列で実装できます。