外部コンポーネントと Handlerbars.js の統合

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

外部コンポーネントの柔軟性により、サードパーティの UI ライブラリとの統合が可能です。

次の例では、Handlebars.js ライブラリを使用して、アセットに関する情報を外部コンポーネントで表示しています。

[設定] タブ

[コントロール名]: コントロールはページ上で一意である必要があります。ここでは、custom.controls.MyCustomControl を使用します。
[設定]: この例では、追加のパラメーターは必要ありません。
[リソース]: コードライブラリ CDN url https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js を追加します。

[コード] タブ

このコードは、シンプルな Handlebars.js コンポーネントの初期化を示したものです。インスタンスは、entityLoaded イベントをサブスクライブします。エンティティが読み込まれると、必要な情報がコンポーネントにマッピングされます。保存されたすべてのエンティティでは、entitySaved イベントにより情報の更新がトリガーされます。

この例では、次のコードを使用します。

var source   = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);

var entityLoadedSubscription = options.mediator.subscribe("entityLoaded", function (entity) {
updateUI(entity);
var entitySavedEvent = Utils.format("entitySaved:{id}", { id: entity.systemProperties.id() });
options._page.mediator.subscribe(entitySavedEvent, updateUI);
});

function updateUI(entity){
var title = entity.properties.Title();
var description = entity.properties.Description()[options.culture];
var context = {title: title, description: description};
var html    = template(context);
document.getElementById("handlebars-result-container").innerHTML = html;
}

[テンプレート] タブ

外部コンポーネントコードには、次の HTML マークアップが必要です。

<template class="entry" id="entry-template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<div class="body">
{{{description}}}
</div>
</template>
<div id="handlebars-result-container">
</div>

結果

変更を保存したら、[アセットの詳細] ページに移動します。外部コンポーネントが、次のように表示されます。

この記事を改善するための提案がある場合は、お知らせください!