JSON in benutzerdefinierte Dijitobjekte übersetzen

Question

Ich suche nach einem Beispiel, in dem JSON, das von der Serverseite erstellt wurde, Objekte darstellt, die dann in benutzerdefinierte Widgets in Dojo übersetzt werden. Der JSON müsste in seiner Struktur sehr spezifisch sein, also wäre es keine sehr allgemeine Lösung. Könnte mir jemand ein Beispiel dafür nennen? Es wäre im wesentlichen die Umkehrung dieses

http://docs.dojocampus.org/dojo/formToJson

Answer 1

Zunächst einmal lassen Sie mich darauf hinweisen, dass JSON produziert von dojo.formToJson() nicht genug, um die Original-Widgets zu erstellen:

{"field1": "value1", "field2": "value2"} 

field1 kann buchstäblich alles sein : ein Kontrollkästchen, ein Optionsfeld, eine Auswahl, ein Textfeld, ein Textfeld oder etwas anderes. Sie müssen genauer festlegen, welche Widgets zur Darstellung von Feldern verwendet werden sollen. Und ich berühre nicht einmal die gesamte UI-Präsentationsschicht: Platzierung, Styling und so weiter.

Aber es ist bis zu einem gewissen Grad möglich.

Wenn wir wollen, Dojo-Widgets verwenden (Dijits), können wir die Tatsache nutzen, dass sie alle einheitlich erstellt werden:

var myDijit = new dijit.form.DijitName(props, node); 

In dieser Zeile:

• dijit.form.DijitName ist Klasse ein dijit Jahre.
• props ist eine Dijit-spezifische Eigenschaften.
• node ist ein Ankerknoten, wo Sie dieses Dijit platzieren können. Es ist optional und Sie müssen es nicht angeben, aber irgendwann müssen Sie Ihr Dijit manuell einfügen.

Also lassen Sie uns diese Informationen als JSON-String kodieren dieses dijit Schnipsel als Beispiel:

var myDijit = new dijit.form.DropDownSelect({ 
    options: [ 
    { label: 'foo', value: 'foo', selected: true }, 
    { label: 'bar', value: 'bar' } 
    ] 
}, "myNode"); 

Die entsprechende JSON etwas wie das sein kann:

{ 
    type: "DropDownSelect", 
    props: { 
    options: [ 
     { label: 'foo', value: 'foo', selected: true }, 
     { label: 'bar', value: 'bar' } 
    ] 
    }, 
    node: "myNode" 
} 

Und der Code analysiere es:

function createDijit(json){ 
    if(!json.type){ 
    throw new Error("type is missing!"); 
    } 
    var cls = dojo.getObject(json.type, false, dijit.form); 
    if(!cls){ 
    // we couldn't find the type in dijit.form 
    // dojox widget? custom widget? let's try the global scope 
    cls = dojo.getObject(json.type, false); 
    } 
    if(!cls){ 
    throw new Error("cannot find your widget type!"); 
    } 
    var myDijit = new cls(json.props, json.node); 
    return myDijit; 
} 

Das bin ich t. Dieser Code-Schnipsel richtig behandelt die Punktnotation in Typen, und es ist intelligent genug, um die globale Reichweite zu überprüfen, so dass Sie JSON wie das für Ihre benutzerdefinierten Dijits verwenden können:

{ 
    type: "my.form.Box", 
    props: { 
    label: "The answer is:", 
    value: 42 
    }, 
    node: "answer" 
} 

Sie können DOM-Elemente die gleiche Art und Weise behandeln, indem Umwickeln dojo.create()-Funktion, die die Schaffung von DOM-Elemente vereint:

var myWidget = dojo.create("input", { 
    type: "text", 
    value: "42" 
}, "myNode", "replace"); 

Offensichtlich Sie eine Platzierungsoption angeben können, oder keine Platzierung überhaupt.

Lassen Sie uns jetzt die bekannte Prozedur wiederholen und unsere JSON Beispiel erstellen:

{ 
    tag: "input", 
    props: { 
    type: "text", 
    value: 42 
    }, 
    node: "myNode", 
    pos: "replace" 
} 

und der Code, es zu analysieren, ist einfach:

function createNode(json){ 
    if(!json.tag){ 
    throw new Error("tag is missing!"); 
    } 
    var myNode = dojo.create(json.tag, json.props, json.node, json.pos); 
    return myNode; 
} 

Sie können sogar JSON Artikel kategorisieren dynamisch:

function create(json){ 
    if("tag" in json){ 
    // this is a node definition 
    return createNode(json); 
    } 
    // otherwise it is a dijit definition 
    return createDijit(json); 
} 

Sie können Ihr Formular als ein Array von JSON-Snippets darstellen, die wir definiert haben und lier gehen sie Ihre Widgets zu erstellen:

function createForm(array){ 
    dojo.forEach(array, create); 
} 

Alle Funktionen sind trivial und im Wesentlichen Einzeiler —, wie Ich mag es ;-)

Ich hoffe, es wird Ihnen etwas zu bauen auf eigene benutzerdefinierte Lösung.