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

Question

I have a form created via javascript that will be set as the content of a modal widget provided by Alloy UI . However I don't feel I am approaching this the right way. This question applies for javascript-created HTML in general.

I realize I should avoid using global variables for the sake of namespace and collision, so maybe someone can help me out. I declare the global var myForm and initialize it with some HTML elements to create a form:

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

And a modal widget that sets myForm as the body content:

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

This seems like a not-so-great way of using Javascript to render HTML, especially for my project since I will have many html elements created via javascript ( <img> 's, <ul> 's etc), so I don't want to get into a bad coding habit. Is there a more standard or acceptable way to dynamically render HTML (not speaking from a templating perspective, ie, Thymeleaf, etc)? Thanks all

Answer 1

An alternative solution is to specify the modal and it's contents in your html, and then let AlloyUI take over and turn it into a modal dialog. You can do this by specifying the boundingBox and contentBox of the Modal as the div s which contain the html you want inside the modal:

 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> 

Answer 2

我会在脚本标记内声明模板，如下所述： <script type =“text / template”> ... </ script>的解释