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（<img>，<ul>创建许多html元素等），所以我不想陷入糟糕的编码习惯。是否有更标准或可接受的方式来动态呈现HTML（不是从模板的角度来讲，即Thymeleaf等）？谢谢大家

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我会在脚本标记内声明模板，如下所述： Explanation of <script type = "text/template"> ... </script>

通过Javascript动态渲染AlloyUI模态正文HTML

2 个答案: