通过 Javascript 动态渲染 AlloyUI 模态主体 HTML

Question

我有一个通过 javascript 创建的表单，它将被设置为 Alloy UI 提供的模态小部件的内容。但是我觉得我没有以正确的方式处理这个问题。这个问题一般适用于 javascript-created 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 的不太好的方法，尤其是对于我的项目，因为我将通过 [=32 创建许多 html 元素=]（<img>、<ul> 等），所以我不想养成不良的编码习惯。是否有更标准或更可接受的方式来动态呈现 HTML（不是从模板角度讲，即 Thymeleaf 等）？谢谢大家

Answer 1

我会按照此处所述在脚本标记内声明模板： Explanation of <script type = "text/template"> ... </script>

Answer 2

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

通过 Javascript 动态渲染 AlloyUI 模态主体 HTML

Dynamically Rendering AlloyUI Modal body HTML via Javascript

html

javascript

alloy-ui