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

Question

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

Fox示例：

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

应转换为

<rect id="button_1" x="0" y="0" width="100" height="50" fill="#ff0000" .../>

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

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

迭代通过对象数组并通过字符串处理生成相应的svg元素非常繁琐，如：

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

在这种情况下，模板化没有帮助，因为我的文档不适合任何模板。它的内容非常有活力。

Answer 1

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