javascript - 通过 Javascript 动态渲染 AlloyUI Modal body HTML

Question

我有一个通过 javascript 创建的表单，它将被设置为 Alloy UI 提供的模态小部件的内容。 .但是我觉得我没有以正确的方式处理这个问题。这个问题一般适用于 javascript 创建的 HTML。

我意识到为了命名空间和冲突我应该避免使用全局变量，所以也许有人可以帮助我。我声明全局变量 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>'

还有一个设置myForm 的模态小部件作为正文内容:

var modal = new Y.Modal(
    {
        bodyContent: myForm,
        centered: true,
        modal: true,
        resizable: false,
        draggable: false,
        width: 350
    }).render();

这似乎是一种使用 Javascript 呈现 HTML 的不太好的方法，特别是对于我的项目，因为我将有许多通过 javascript 创建的 html 元素( <img> 、<ul> 等)，所以我不想养成不良的编码习惯。是否有更标准或更可接受的方式来动态呈现 HTML(不是从模板 Angular 讲，即 Thymeleaf 等)？谢谢大家

Answer 1

另一种解决方案是在您的 html 中指定模态及其内容，然后让 AlloyUI 接管并将其变成模态对话框。您可以通过将 Modal 的 boundingBox 和 contentBox 指定为 div 来完成此操作，其中包含您想要的模态内的 html:

YUI().use('aui-modal', function(Y) {
  new Y.Modal({
    boundingBox: '#bb',
    contentBox: '#cb',
    centered: true,
    modal: true,
    resizable: false,
    draggable: false,
    width: 350
  }).render();
});

<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<div id="bb">
  <div id="cb">
    <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>
  </div>
</div>