将JSON转换为自定义dijit对象

Question

我在查找一个示例，其中从服务器端构建的JSON用于表示对象，然后将这些对象转换为dojo中的自定义窗口小部件。 JSON在结构上必须非常具体，所以它不是一个通用的解决方案。有人能指出我的一个例子吗？这将基本上是这样

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

Answer 1

首先，相反我要指出的dojo.formToJson()不足以重建原始的小部件JSON生产：

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

field1可以从字面上什么：复选框，单选按钮，选择，文本区域，文本框或其他任何内容。您必须更具体地使用小部件来表示字段。而且我甚至都不会触及整个UI表示层：放置，样式等等。

但是在一定程度上是可能的。

如果我们要使用Dojo小部件（dijit的），我们可以利用，它们都被统一创建的事实：

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

在这一行：

• dijit.form.DijitName是dijit中的类。
• props是一个dijit特定的属性。
• node是放置此dijit的锚节点。这是可选的，你不需要指定它，但在某些时候你必须手动插入你的dijit。

因此，让我们编码服用此dijit的片段作为一个例子将此信息作为JSON字符串：

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

相应的JSON可以类似的东西：

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

而且代码解析它：

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

这就是我吨。这段代码正确处理的类型的点符号，它是足够聪明的检查在全球范围内，所以你可以使用JSON一样，为您定制的dijits：

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

你可以把DOM元素的方式，通过同包装dojo.create()功能，统一了DOM元素的创建：

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

很明显，你可以指定任何放置选项，或根本没有放置在所有。

现在让我们重复熟悉的过程，创造我们的JSON示例：

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

并分析它的代码很简单：

动态

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

你甚至可以归类JSON项目：

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

您可以将您的表单表示为我们定义的JSON片段数组利尔和去在它创建的小部件：

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

所有功能都微不足道，基本上单行—是多么我喜欢;-)

我希望它会给你的东西建立在你的自己定制解决方案