j-UIBuilder

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente rendert die über UI Builder entworfene Anwendung. Sie können die App über den in der Komponente angegebenen path oder über die Option config.url laden. Der Pfad kann eine URL-Adresse zum App-Schema JSON oder zum App-Objekt (geparstes JSON) enthalten.

Konfiguration:

app {String} ein Link zur Methode/Variable, in der die app-Instanz gespeichert wird
url {String} ein Link zum App-Schema (muss im Format json vorliegen)
css {Boolean} wendet den App-Stil auf das aktuelle Element an (Standard: true)
id {String} überschreibt die App-ID

Methoden:

component.load(data) Die Methode lädt app in das aktuelle Element

Eigenschaften:

component.app enthält eine app-Instanz

Wie gehe ich mit Daten um?

<ui-component name="uibuilder" ... config="app:myapphandler"></ui-component>

<script>

	function myapphandler(app) {

		// app.component {jComponent}
		// app.schema {Object} uibuilder compiled design
		// app.schema.inputs {Array Objects}
		// app.schema.outputs {Array Objects}

		// How to capture data?
		app.on('output', function(meta) {
			// meta.id {String} output identifier
			// meta.data {Object} raw data from the builder
			// meta.app {Object} app instance
			// meta.instance {Object} which instance sent data?
			// meta.instanceid {String} an instance identifier
			// meta.component {Object} which component sent data?
			// meta.componentid {String} a component identifier
			// meta.err {String} optional, error handler (nullable)
			// meta.output {String} an output name
			// meta.note {String} optional, a note
			// meta.ref {String} an internal reference

			AJAX('POST /yourapi/', meta.data, function(response) {
				// What next?
			});

		});

		// How to inject data?
		// Example
		app.on('ready', function() {
			// First, you must know input identifier
			app.input('cidlm5caacg_load', { email: '@' }, console.log);
		});

	}

</script>

Verwenden Sie es mit <ui-component name="uibuilder">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<ui-component name="uibuilder" config="url:https://cdn.componentator.com/uibuilder/demo/render/dashboard.json"></ui-component>