igRegisterScript 関数
Ignite UI for Blazor が提供する各種コンポーネントのカスタマイズにあたっては、JavaScript による実装を必要とする場合があります。
そのようなケースにおいては、Ignite UI for Blazor が提供する igRegisterScript という JavaScript 関数を呼び出して、「スクリプト名」とともに JavaScript 関数を登録しておく、そのような JavaScript プログラムを記述、ファイル (.js) に保存しておき、これを wwwroot/index.html などのフォールバックページから script タグで読み込んでおきます。
igRegisterScript 関数の引数は以下のとおりです。
- 第一引数 … Ignite UI for Blazor に登録する「スクリプト名」(文字列)
- 第二引数 … 登録したスクリプト名で呼び出される JavaScript 関数
- 第三引数 … 第二引数に指定した JavaScript 関数を即時実行するか (true) 否か (false) を示す boolean 値
igRegisterScript(
"XXXHandler",
() => { ... },
true);
このようにして “登録” しておいた JavaScript 関数を、Ignite UI for Blazor のコンポーネントのパラメーターから「スクリプト名」で指定することで、利用します。
<IgbXXX XXXScript="XXXHandler" ...> </IgbXXX>
igRegisterScript 関数の第三引数について
igRegisterScript 関数の第三引数に指定する boolean 値ですが、false を指定してスクリプトを登録した場合は、Ignite UI for Blazor がそのスクリプト名を指定して該当する JavaScript 関数を呼びだす際、単純に、igRegisterScript 関数の第二引数に指定した JavaScript 関数がその都度呼び出されます。
いっぽうで、true を指定して登録した場合は、igRegisterScript 関数の第二引数に指定した JavaScript 関数が、その登録時にまずはいったん呼び出されます。すると Ignite UI for Blazor は、そのようにして即時実行された JavaScript 関数が返した関数ないしはオブジェクトを使用するようになります。
IgbGrid の RowClassesScript パラメーターを指定する場合など、CSS クラス名に相当する名前を持つ判定メソッドを保持するオブジェクトを返す必要がある場合は、この igRegisterScript の第三引数は true で指定する必要があります (下記コード例)。
igRegisterScript(
"RowClassesHandler",
() => ({
foo: (row) => ...,
bar: (row) => ...,
...
}),
// 第三引数に true を指定することで上記第二引数の関数が即時実行され、
// その結果返されたオブジェクトが Ignite UI for Blazor によって使用される。
// このように関数そのものではなく、オブジェクトが必要とされる場面では、
// この第三引数は true を指定する必要がある。
true);
それ以外の場合は、igRegisterScript 関数の第三引数には false を指定して利用することができます。
なお、オブジェクトではなく簡潔な JavaScript 関数が必要とされる場合でも、igRegisterScript 関数の第三引数には true を指定して、“関数を返す関数” を第二引数に指定することで、 JavaScript のグローバル名前空間を汚染することなく、ローカル変数などを用いた初期化処理を実装することができます。一般にこの技法は、JavaScript の無名関数の即時実行によって実現される技法ですが、同様のことを igRegisterScript 関数呼び出し時に実現できる次第です。
igRegisterScript(
"...",
() => {
// このブロックで const や let 変数を使用しても
// グローバル名前空間に漏れ出ることはない
// そのような何らかの初期化処理を経て、
// 最終的に必要とされる JavaScript 関数を返すようにする
return () => { ... };
},
// 第三引数に true を指定することで上記第二引数の関数が即時実行され、
// その結果返された関数が Ignite UI for Blazor によって使用される
true);
igRegisterScript 関数を同じスクリプト名・異なる関数で実行したら
igRegisterScript 関数を、既に登録済みのものと同じスクリプト名で実行した場合は、そのスクリプト名で先に登録されていた内容は上書きされます。
ただし、既にそのスクリプト名を参照して動作開始している Ignite UI for Blazor コンポーネントについては、上書きされる前に取得した JavaScript 関数への参照を既に持ってしまっています。そのため、igRegisterScript 呼び出しで同名のスクリプトの実装が上書きされてしまっても、即時にはその動作に影響しません。つまり、同名のスクリプト名による igRegisterScript 呼び出しで上書きした関数を、既に実行中の Ignite UI for Blazor コンポーネントに使用させる術はありません。いったんそのコンポーネントが破棄され、その後に再度生成された以降で、上書き後の実装が使用されるようになります。
igRemoveScript 関数
igRemoveScript 関数は、ここまでで説明してきたスクリプト登録を、スクリプト名を指定して削除する関数です。
igRemoveScript("..."); // 登録削除したいスクリプト名を引数に指定
一般的には、いちど登録したスクリプトを削除する必要はないと考えられます。ただし、igRegisterScript で登録した JavaScript 関数が、クロージャーとして何か重いリソースの参照を保持している場合など、一部シナリオでは登録の削除が求められるケースが想定されます。そのような場合は、この igRemoveScript 関数を呼び出して、登録の削除を実施できます。
なお、既にそのスクリプト名を参照して動作開始している Ignite UI for Blazor コンポーネントについては、登録削除される前に取得した JavaScript 関数への参照を既に持ってしまっています。そのため、igRemoveScript 呼び出しで指定のスクリプトが登録削除されてしまっても、即時にはその動作に影響しません。
