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

Dynamically Rendering AlloyUI Modal body HTML via Javascript

本文关键字：模态 态体 HTML AlloyUI Javascript 动态 通过      更新时间：2023-09-26

我有一个通过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(不是从模板的角度来看，即 Thymeleaf 等(？谢谢大家

另一种解决方案是在 html 中指定模态及其内容，然后让 AlloyUI 接管并将其转换为模态对话框。您可以通过将模态的boundingBox和contentBox指定为包含模态内所需 html 的div来执行此操作：

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>

我会在脚本标签中声明模板，如下所述：<脚本类型> ...

相关文章：