Einleitung
Es ist keine unübliche Programmierpraxis, die Daten von der Darstellung und der Programmausführung zu trennen. Sie können dies mit JavaScript-Modulen tun. In diesem Dokument wird gezeigt, wie Sie eine Variable in einem Datenmodul erstellen und sie dann in Ihrem Plugin-Implementierungscode verwenden.
Die grundlegenden Implementierungsschritte sind:
- Erstellen Sie ein Datenmodul und speichern Sie in Variablen die Daten, die Sie in Ihrer Plugin-Implementierung verwenden möchten.
- In einem Elementbaustein übernehmen Sie die Daten als Parameter für eine Funktion, die die Daten nach Ihren Wünschen anzeigt oder verwendet.
- In Ihrem Controller übergeben Sie die Daten als Parameter, wenn Sie die Funktion aufrufen, die die Daten anzeigt oder verwendet.
Prüfung des Codes
Der in den folgenden Codebeispielen gezeigte Anwendungsfall besteht darin, den HTML-Code als Variable im Datenmodul zu erstellen und ihn dann zur Anzeige an eine benutzerdefinierte Seite zu übergeben. Einzelheiten zum verwendeten Code finden Sie Zeile für Zeile im Dokument Erstellen einer benutzerdefinierten Seite . In diesem Dokument geht es vor allem darum, wie die Daten erstellt und zur Nutzung verteilt werden.
Der erste Codeblock zeigt den Inhalt des Datenmoduls. Es wird eine einzelne Variable erstellt und zur Verwendung durch den Controller exportiert. Natürlich können im Datenmodul auch mehrere Datenvariablen angelegt werden.
var pageContent = '<h2> This is content in the <em>custom page</em> passed as a parameter from a data file</h2><br>'
+ '<p>You can build your HTML in many ways and the page can contain the content you choose. You are NOT limited to the page types shown in the page layout UI.</p><br>'
+ '<p>Even use images!</p>'
+ '<img src="https://solutions.brightcove.com/bcls/beacon-plugins/yachats-far.png">';
export { pageContent };Dieser Code zeigt, wie das Modul des benutzerdefinierten Seitenelements die Daten anzeigen wird. In diesem Fall bekommt es die <div> -Element, das für den HTML-Code der benutzerdefinierten Seite bestimmt ist, und platziert diesen HTML-Code dann in der <div>.
const populateCustomPage = (pageContent) => {
var customPageArea = document.getElementById('custom_page_area');
customPageArea.insertAdjacentHTML('afterbegin', pageContent);
};
export { populateCustomPage };Die letzte Aufgabe besteht darin, dass der Controller die Daten verwendet, indem er sie an die Funktion zur Anzeige der Daten weitergibt. Die im Datenmodul definierte Variable wird zusammen mit der Funktion, die den Inhalt anzeigt, importiert. In diesem Anwendungsfall prüft der Code, ob es sich bei der soeben geladenen Seite um die erstellte benutzerdefinierte Seite handelt, und ruft, falls ja, die Funktion zur Anzeige der Daten auf, wobei die Datenvariable an die Funktion übergeben wird.
import { pageContent } from './data.js';
import { populateCustomPage } from './custom-page-module.js';
...
case 'onBeaconPageLoad':
if (event.data.data.slug == '24849-custom-for-plugin') {
populateCustomPage(pageContent);
}
break;