通過Javascript動態渲染AlloyUI模態正文HTML

Question

我有一個通過javascript創建的表單，它將被設置為Alloy UI提供的模態小部件的內容。 但是我覺得我沒有以正確的方式接近這一點。 這個問題一般適用於javascript創建的HTML。

我意識到我應該避免使用全局變量來進行命名空間和沖突，所以也許有人可以幫助我。 我聲明了全局var 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接管並將其轉換為模態對話框。 您可以通過將Modal的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> 

Answer 2

我會在腳本標記內聲明模板，如下所述： <script type =“text / template”> ... </ script>的解釋