レンダリングのトラブルシューティング
Microsoft Graph ツールキット コンポーネントは、高度なカスタマイズが可能です。 そのため、さまざまなソリューションに適しています。 データの表示方法のカスタマイズに関して問題が発生している場合に、何が問題なのかを理解するためのヒントをいくつかご紹介します。
テンプレートにどのようなデータがあるかを確認する
Microsoft Graph ツールキット コンポーネントは、このモジュールの前半で見たように、テンプレートを使用してデータを表示します。 各コンポーネントには事前に定義された一連のテンプレートが用意されていますが、それらをアプリに合わせてカスタマイズすることができます。
テンプレートをカスタマイズするときに最もよくある問題は、テンプレートにバインドされたデータを誤って参照してしまうことです。 存在しないプロパティをテンプレートで参照した場合、コンポーネントには何も表示されません。 期待通りのデータが表示されない場合には、テンプレートにバインドされているデータを最初に確認しましょう。 この手順を実行するには、テンプレートに {{ this }} を追加します。
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template>{{ this }}</template>
</mgt-agenda>
この例は、Web アプリのテンプレートにバインドされているすべてのデータを示しています。
複雑なデータセットを扱う場合、ブラウザー上で直接データを確認するのは便利ではありません。 その代わりに、ブラウザーの開発者ツールでコンソールにログを記録し、オブジェクトとして探索できるようにすると便利かもしれません。 これを行うには、{{ console.log(this) }} を使用します。
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template>{{ console.log(this) }}</template>
</mgt-agenda>
この例では、テンプレートにバインドされたデータをコンソールにログとして記録します。
コンポーネントのテンプレートでは、{{ }} の間で任意の JavaScript 関数を使用できます。 このように、ブラウザーにデータを表示したり、コンソールにログを記録したりすることに限定されません。
また、テンプレートにバインドされるデータのプロパティ名については、大文字と小文字が区別されることにご注意ください。 期待通りのデータがコンポーネントに表示されない場合には、プロパティ名のスペルが正しいかどうかをご確認ください。
適切なテンプレートを使用していますか?
Microsoft Graph ツールキット コンポーネントの中には、カスタマイズ可能なテンプレートを複数公開しているものがあります。
data-type 属性でどのテンプレートを使用するかを選択します。
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template data-type="event">{{ console.log(this) }}</template>
</mgt-agenda>
data-type 属性を指定しない場合、コンポーネントは既定のテンプレートを使用します。
各テンプレートには、それぞれ異なるデータ構造がバインドされています。 テンプレートを切り替える場合、使用可能なデータセットを適切に参照するために、テンプレートの内容を更新する必要があります。
利用可能なテンプレート、公開されている機能については、各コンポーネントのドキュメントに記載されています。 これらのデバッグ手法を、実際に使ってみましょう。