Traduction de JSON en objets dijit personnalisés

Question

Je cherche un exemple où JSON construit du côté serveur est utilisé pour représenter des objets qui sont ensuite traduits en widgets personnalisés dans dojo. Le JSON devrait être très spécifique dans sa structure, donc ce ne serait pas une solution très générale. Quelqu'un pourrait-il me diriger vers un exemple de cela? Il serait essentiellement l'inverse de ce

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

Answer 1

D'abord permettez-moi de souligner que JSON produit par dojo.formToJson() ne suffit pas à recréer les widgets originaux:

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

field1 peut être littéralement tout : une case à cocher, un bouton radio, une sélection, une zone de texte, une zone de texte ou toute autre chose. Vous devez être plus précis quels widgets utiliser pour représenter les champs. Et je ne touche même pas toute la couche de présentation de l'interface utilisateur: placement, style, etc.

Mais c'est possible dans une certaine mesure.

Si nous voulons utiliser des widgets Dojo (Dijits), nous pouvons tirer parti du fait que tous sont créés de façon uniforme:

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

Dans cette ligne:

• dijit.form.DijitName est la classe d'un dijit.
• props est une propriété spécifique de dijit.
• node est un noeud d'ancrage où placer ce dijit. C'est facultatif, et vous n'avez pas besoin de le spécifier, mais à un certain point, vous devez insérer votre dijit manuellement.

Donc, nous allons encoder ces informations comme une chaîne JSON prenant cet extrait de dijit comme exemple:

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

Le JSON correspondant peut être quelque chose comme ça:

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

Et le code analyser:

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; 
} 

C'est t. Cet extrait gère correctement la notation de points dans les types, et il est assez intelligent pour vérifier la portée globale aussi, afin que vous puissiez utiliser JSON comme ça pour vos dijits personnalisés:

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

Vous pouvez traiter les éléments DOM de la même façon par emballage fonction dojo.create(), qui unifie la création d'éléments DOM:

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

Évidemment, vous pouvez spécifier une option de placement, ou pas du tout placement.

Maintenant, nous allons répéter la procédure familière et de créer notre échantillon JSON:

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

Et le code pour l'analyser est simple:

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; 
} 

Vous pouvez même catégoriser les éléments JSON dynamiquement:

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

Vous pouvez représenter votre formulaire sous la forme d'un tableau d'extraits JSON définis pour l'oreille. Lierre et allez dessus créer vos widgets:

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

Toutes les fonctions sont essentiellement trivial et une seule ligne — à quel point je l'aime ;-)

J'espère que ça va vous donner quelque chose à construire sur votre propre solution personnalisée.