j-UIStudio

Die Komponente laden eine Flow UI Studio-Anwendung durch ihre konfigurierten Endpunkte ein. Stellen Sie die URL zu diesem Endpunkt und verwalten Metadaten oder Anwendungsupdates mit onmeta und onapp.

Diese Komponente gibt die App nach dem Total.js Flow UI Studio Schema zurück.

Konfiguration:

• url {String} ist das Navigationsendpunkt, das POST-Anfragen akzeptiert und JSON-Schrittmetadata zurückgibt
• css {Boolean} wendet den App-Stil auf das aktuelle Element an (Standard: true)
• ssid {String} optionale, fügt einen Sitzungsidentifikator zur URL für den Flow hinzu
• title {Boolean} optionale, document.title durch den App-Name neu geschrieben
• plus {String} optionale, es funktioniert nur mit title:true und es fügt title - config.plus hinzu
• onmeta {String} optionale, ein Link zum function(meta) erfährt eine Meta-Daten
• onapp {String} optionale, eine Verbindung zum function(app) erfährt ein neues UI-Design
• origin {String} optional
• onrequest {String} optionale, ein Link zum function(payload) kann Anfragedaten ändern
• flowoutput {Boolean} optionale, ermöglicht Ausgang nur aus FlowOutput Komponente (Default: true)

Eigenschaften:

• component.app enthält eine app-Instanz

Gut zu wissen:

Die Komponente erweitert die app-Instanz, indem sie die Eigenschaft von breadcrumb {Array} hinzufügt.

Nutzung

<ui-component name="uistudio"
  config="url:/api/studio/;onapp:studioLoaded;loading:false"></ui-component>
<script>
  function studioLoaded(app) {
    console.log(app);
  }
</script>

Navigation Endpunkt

Die Anfrage trägt den aktuellen Navigationsstatus, einschließlich origin, query, eine optionale ssid, und die aktuelle id, output und data, wenn eine Anwendung einen Ausgang auslässt.

Zurück ein id für den Schritt und ein url für sein exportiertes UI Builder-Design:

{
  "id": "home",
  "url": "/ui/home.json",
  "data": {}
}

Das Design, das aus dem UI Builder bei /ui/home.jsonDie Komponente herunterlädt es mit GET und erstellt die Anwendung durch UIBuilder.build()Wenn die Antwort eine input, die Komponente nennt die Anwendung Eingang mit input und dataDie onmeta Callback erhält die Schritt-Reaktion und onapp Er erhält die erstellte Anforderung.

loading:false deaktiviert den Ladeindikator. Um ihn anzuzeigen, erklären Sie eine j-Loading Komponente und aktivieren Sie loading.

Quelle: Total.js Komponenten. Copyright Peter Širka und Mitwirkende. MIT-Lizenz.