-
Notifications
You must be signed in to change notification settings - Fork 4
Einstieg
Inhalte sind up-to-date für ccmjs v27.5.0
Klicke hier für die englische Version.
Mit dem JavaScript-Befehl ccm.start(component, config, element) kann eine Komponente (component) mit einer konkreten Konfiguration (config) in einen Webseitenbereich (element) eingebettet werden. Die von der Komponente realisierte App wird dann mit dieser Konfiguration im Webseitenbereich angezeigt.
Sobald in einer Webseite die ccm.js eingebunden ist, steht die ccm.start-Funktion zur Verfügung.
Hier ein Beispiel für die Einbettung einer Quiz-App:
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="https://ccmjs.github.io/ccm/ccm.js"></script>
<script>
ccm.start( 'https://ccmjs.github.io/akless-components/quiz/ccm.quiz.js', {
feedback: true,
questions: [
{
"text": "Funktioniert dieses Beispiel?",
"input": "radio",
"answers": [
{ "text": "Ja", "correct": true },
{ "text": "Nein" }
]
}
]
}, document.body );
</script>Bei W3C-Webkomponenten liegt der Fokus auf HTML und der Erweiterung von HTML-Elementen. Bei der ccmjs-Webtechnologie liegt der Fokus auf JavaScript und der Konfigurierbarkeit mittels JSON. Anders als bei Angular, React und Vue.js können Komponenten nachträglich zur Laufzeit in Webseiten eingebettet werden. Die Einbettung funktioniert auch mehrfach in der selben Webseite konfliktfrei in unterschiedlichen Versionen und Konfigurationen.
Alle abhängigen Ressourcen wie HTML-Templates und CSS sind über die Konfiguration ohne Codeänderung austauschbar.
Hier ein Beispiel für den Austausch des HTML-Templates und des CSS:
ccm.start( 'https://ccmjs.github.io/akless-components/quiz/ccm.quiz.js', {
css: [ 'ccm.load', 'https://ccmjs.github.io/akless-components/quiz/resources/weblysleek-v2.css' ],
html: [ 'ccm.load', 'https://ccmjs.github.io/akless-components/quiz/resources/templates-v3.html' ],
// ...
}, document.body );