Question

我正在寻找一个示例，其中从服务器端构造的JSON用于表示随后在dojo中转换为自定义小部件的对象。 JSON必须在其结构中非常具体，因此它不是一个非常通用的解决方案。有人能指出我的一个例子。它基本上与此

相反

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

Answer 1

首先让我指出dojo.formToJson()生成的JSON不足以重新创建原始小部件：

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

field1几乎可以是任何东西：复选框，单选按钮，选择，文本区域，文本框或其他任何内容。您必须更具体地说明用于表示字段的小部件。我甚至没有触及整个UI表示层：展示位置，样式等等。

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

如果我们想使用Dojo小部件（Dijits），我们可以利用它们全部统一创建的事实：

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

在这一行：

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

所以让我们将这个信息编码为一个JSON字符串，以此dijit片段为例：

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

您可以通过包装dojo.create()函数以相同的方式处理DOM元素，该函数统一了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);
}

所有功能都是微不足道的，基本上是单行 - 只是我喜欢它; - ）

我希望它能为您提供一些基于您自己的自定义解决方案的东西。

将JSON转换为自定义dijit对象

1 个答案: