通过Javascript动态呈现AlloyUI模态体HTML

我有一个通过javascript创建的表单，它将被设置为由提供的模式小部件的内容。然而，我觉得我的方法不对。这个问题通常适用于javascript创建的HTML

我意识到为了名称空间和冲突，我应该避免使用全局变量，所以也许有人可以帮我。我声明全局var

myForm

，并使用一些HTML元素初始化它以创建表单：

var myForm = '<form id="my-form" method="get"> 
<div> 
  <select> 
    <option value="option-1">Option 1</option> 
    <option value="option-2">Option 2</option> 
    <option value="option-3">Option 3</option> 
  </select> 
</div> 
</form>'

---

这似乎不是一个很好的使用Javascript呈现HTML的方法，特别是对于我的项目，因为我将通过Javascript创建许多HTML元素（

，

，等等），所以我不想养成坏的编码习惯。是否有一种更标准或更可接受的方式来动态呈现HTML（不是从模板的角度讲，例如Thymeleaf等）？谢谢大家

我将在脚本标记中声明模板，如下所述：

---

另一种解决方案是在html中指定模式及其内容，然后让AlloyUI接管并将其转换为模式对话框。您可以通过将模态的

边界框

和

内容框

指定为

div

s来完成此操作，其中包含您希望在模态中使用的html：

YUI（）。使用（'aui-modal'，函数（Y）{
新Y.Modal({
边界框：“#bb”，
contentBox:“#cb”，
对,，
莫代尔：是的，
可调整大小：false，
可拖动：错误，
宽度：350
}).render（）；
});

选择1
选择2
选择3
createElement
浮现在脑海中！这么简单。非常感谢。
var modal = new Y.Modal(
    {
        bodyContent: myForm,
        centered: true,
        modal: true,
        resizable: false,
        draggable: false,
        width: 350
    }).render();