編集

Microsoft Graph Toolkit

  • [アーティクル]

ほとんどの Microsoft Graph Toolkitコンポーネントでは、カスタム テンプレートを使用してコンポーネントのコンテンツを変更できます。

すべての Web コンポーネントは、要素に基づいてテンプレートをサポート <template> します。 たとえば、コンポーネントのテンプレートを上書きするには、コンポーネント内に要素 <template> を追加します。

<mgt-agenda>
  <template data-type="event">
      <div>{{event.subject}}</div>
      <div data-for='attendee in event.attendees'>
          <mgt-person person-query="{{attendee.emailAddress.name}}">
            <template>
              <div data-if="person.image">
                <img src="{{person.image}}" />
              </div>
              <div data-else>
                {{person.displayName}}
              </div>
            </template>
          </mgt-person>
      </div>
  </template>
</mgt-agenda>

Microsoft Graph Toolkit React コンポーネントを使用している場合は、テンプレートの作成React使用できます。 詳細については、「ツールキットを使用する」を参照React。

データ型

各コンポーネントには、テンプレート化できる複数のパーツを含めできます。 たとえば、コンポーネントでは、 mgt-agenda 個々のイベント、個々のセクション ヘッダー、読み込みビュー、データ ビューなしなどのテンプレートを作成できます。 テンプレートを指定するには、テンプレートの data-type 属性を使用します。 たとえば、次に示すように、各イベント mgt-agendaをテンプレートするには、データ event 型を使用します。

<mgt-agenda>
  <template data-type="event"> </template>
</mgt-agenda>

指定しない data-type 場合、コンポーネント全体がテンプレートに置き換えられる。 また、同じ目的 data-type="default" で使用できます。

データのバインド

多くのテンプレートでは、データ コンテキストとしてテンプレートに渡されるデータのバインドを許可します。 たとえば、コンポーネント内の event テンプレートは mgt-agenda 、テンプレート {event} で直接使用できるオブジェクトを渡します。 などの式を展開するには event.subject、二重の中かっこを使用します。

<template data-type="event">
  <div>{{event.subject}}</div>
</template>

この形式は、属性内でも使用できます。

<template data-type="event">
  <a href="{{ event.onlineMeetingUrl }}" />
</template>

注: オブジェクトを展開したり、 {{event}} JSON 文字列 {{this}} としてレンダリングしたりすることもできます。 これは、テンプレートを開発する場合に役立ちます。

バインド構文の変更

既定では、式を展開するには、二重中かっこ ( ) を使用します {{expression}} 。 ただし、二重かっこ構文が既に使用されている環境では、この構文を変更できます。 たとえば、次の例では、二重角かっこ ( ) を使用します [[expression]] 。

import { TemplateHelper } from '@microsoft/mgt';

TemplateHelper.setBindingSyntax('[[', ']]');

データ コンテキスト ヘルパー のプロパティ

次のプロパティは、テンプレート内のデータ コンテキスト オブジェクトでも使用できます。

プロパティ 説明
$index ループ中にレンダリングされるアイテムの数値インデックス data-forです。
$parent テンプレートが別のテンプレート内でレンダリングされる場合、このプロパティを使用すると、親データ コンテキストにアクセスできます。

次の例は、data-for $index ループでプロパティを使用する方法を示しています。

<mgt-person>
  <mgt-person-card>
    <template data-type="additional-details">
      <span data-for="language in languages">
        {{ language.displayName }}<span data-if="$index < languages.length - 1">, </span>
      </span>
    </template>
  </mgt-person-card>
</mgt-person>

{{this}}

データ コンテキストをデバッグするために、バインド式 this で使用できます。 最も簡単なフォームは、テンプレート {{this}} 内の任意の場所に追加します。

<template data-type="event">
  <div>
    {{this}}
  </div>
</template>

バインド式で JavaScript console console.log(this) console を使用することができますので、テンプレートで (または他の API) を使用できるオブジェクトにもアクセスできます。

<template data-type="event">
  <div>
    {{console.log(this)}}
  </div>
</template>

条件付きレンダリング

データ コンテキストに基づいて条件が true または false の場合にのみ要素をレンダリングできます。 and data-if 属性は data-else 式を評価し、true または false の場合にのみレンダリングできます。

<mgt-person person-query="john doe">
  <template>
    <div data-if="person.image">
      <img src="{{ person.image }}" />
    </div>
    <div data-else>
      {{ person.displayName }}
    </div>
  </template>
</mgt-person>

ループ

データ コンテキスト オブジェクトにループが含まれている場合、データをループ処理する必要があります。 このシナリオでは、属性を使用 data-for します。

<template data-type="event">
  <ul>
    <li data-for='attendee in event.attendees'>
      {{ attendee.displayName }}
    </li>
  </ul>
</template>

テンプレート コンテキスト

バインド内のデータの変換、イベントへのバインド、またはテンプレート バインドでの外部データの使用が必要なシナリオでは、テンプレートは外部データ コンテキストへのバインドをサポートします。 次の 2 つの方法で、追加のテンプレート コンテキストを追加できます。

  1. コンポーネントに直接アクセスします。

    各コンポーネントはプロパティを定義 templateContext します。このプロパティを使用して、コンポーネント内の任意のテンプレートに追加のデータを渡す場合に使用できます。

    document.querySelector('mgt-agenda').templateContext = {

  someObject: {},
  formatDate: (date: Date) => { /* format date and return */ },
  someEventHandler: (e) => { /* handleEvent */  }

}

    これで、オブジェクト内の templateContext プロパティをテンプレートのバインド式で使用できます。

  2. すべてのコンポーネントのグローバル。

    クラス TemplateHelper は、すべてのコンポーネントで globalContext グローバルに使用できるデータまたは関数を追加するオブジェクトを公開します。

    import { TemplateHelper } from '@microsoft/mgt';

TemplateHelper.globalContext.someObject = {};
TemplateHelper.globalContext.formatDate = (date: Date) => { /* format date and return */ };
TemplateHelper.globalContext.someEventHandler = (e) => { /* handleEvent */  }

コンバーター

多くの場合、データをテンプレートに表示する前に変換する必要があります。 たとえば、日付をレンダリングする前に適切に書式設定する場合があります。 このような場合は、テンプレート コンバーターを使用できます。

テンプレート コンバータを使用するには、まず変換を実行する関数を定義する必要があります。 たとえば、イベント オブジェクトを書式設定された時間範囲に変換する関数を定義できます。

document.querySelector('mgt-agenda').templateContext = {

  getTimeRange: (event) => {
    // TODO: format a string from the event object as you wish
    // timeRange = ...

    return timeRange;
  }

}

テンプレートでコンバータを使用するには、コードの背後で関数を使用する場合と同様に使用します。

<template data-type="event">
  <div>{{ getTimeRange(event) }}</div>
</template>

イベントまたはプロパティのバインド

この data-props 属性を使用すると、イベント リスナーを追加したり、テンプレートにプロパティ値を直接設定できます。

<template>
    <button data-props="{{@click: myEvent, myProp: value}}"></button>
</template>

data-props は、設定する可能性があるプロパティまたはイベント ハンドラーごとにコンマで区切られた文字列を受け取ります。

イベント ハンドラーを追加するには、イベントの名前の前に . を付します @。 イベント ハンドラーは、要素の中で使用できる templateContext 必要があります。

document.querySelector('mgt-agenda').templateContext = {

  someEventHandler: (e, context, root) => { /* handleEvent */  }

}

<template>
    <button data-props="{{@click: someEventHandler}}"></button>
</template>

テンプレートのイベント args、データ コンテキスト、およびルート要素は、パラメーターとしてイベント ハンドラーに渡されます。

テンプレート レンダリング イベント

場合によっては、レンダリングされた要素への参照を取得したい場合があります。 これは、コンテンツのレンダリングを自分で処理する場合や、レンダリングされた要素を変更する場合に便利です。

このシナリオでは、テンプレートのレンダリング templateRendered 後に発生するイベントを使用できます。

let agenda = document.querySelector('mgt-agenda');
agenda.addEventListener('templateRendered', (e) => { });

イベントの詳細には、レンダリングされる要素、データ コンテキスト オブジェクト、テンプレートの種類への参照が含まれる。

agenda.addEventListener('templateRendered', (e) => {
  let templateType = e.detail.templateType;
  let dataContext = e.detail.context;
  let element = e.detail.element;

  if (templateType === 'event') {
    element.querySelector('.some-button').addEventListener('click', () => {});
  }
});

スタイル設定

テンプレートは、シャドウ ドムの外側にレンダリングされるので、CSS を介して通常スタイル設定できます。