从许多复杂的 javascript 对象生成 HTML 页面的便捷方法答案

【问题标题】：Covenient way to generate HTML page from many complex javascript object从许多复杂的 javascript 对象生成 HTML 页面的便捷方法
【发布时间】：2014-12-13 16:35:18
【问题描述】：

我想从许多 javascript 对象生成一个 HTML 页面，然后将其显示给用户。

狐狸示例：

var mybutton = {
  id: 'button_1',
  x: '0',
  y: '0',
  width: '100',
  height: '50',
  state: 'on',
  onColor: '#ff0000',
  offColor: '#00ff00',
  base: 'page1.node1',
  ...
}

应该转换成

&lt;rect id="button_1" x="0" y="0" width="100" height="50" fill="#ff0000" .../&gt;

然后添加到一个html文档中。本文档中还有许多其他元素（具有不同的类型）。最终，该文档被保存到浏览器中呈现的文件中。

主要问题是我不知道文档中有多少元素，有什么类型，......在设计时。都是从配置文件中加载的。

遍历对象数组并通过字符串处理生成对应的svg元素很繁琐，例如：

var document;
...
 
if(mybutton instanceof button) {
  var element = '<rect id="' + mybutton.id + '" ' + mybutton.x + '" ' + ...;
  document +=element;
}

模板在这种情况下没有帮助，因为我的文档不适合任何模板。它的内容是高度动态的。

【问题讨论】：

标签： javascript node.js svg express

【解决方案1】：

如果我是你，我不会重新发明轮子。我们使用 extJS 来做到这一点。在www.sencha.com 上查看文档。我们不使用 extJS 的 MVC 部分，只使用允许我们定义小部件并自动显示在页面上的 javascript api。

【讨论】：

OP 问题与 ExtJS 无关。
extJS 对我没有帮助。