如何在JavaScript上使用模板？

-1

我有一個函數，將HTML添加到一個div。如何在JavaScript上使用模板？

var user = $("#ddlUser").val(); 
    var role = $("#ddlUserRole").val(); 

    var html = '<div class="calendaruser">'; 
    html += '<span>' + user + '</span> <button type="button" class="btn btn-default btn-xs">הסר משתמש</button>'; 
    html += '<div>' + role + '</div>'; 
    html += '</div>'; 

    $("#divCalendarUsers").append(html);

我在尋找更好的方式來使用模板。

來源

2017-07-04 eyalb

您可以使用該模板文字：

一個小例子：

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Array2Table</title> 
 
    </head> 
 
    <body> 
 
    <div id="tableContent"></div> 
 
    <script> 
 
     var country = ["Country1", "Country2", "Country3"]; 
 
     var capital = ["City1", "City2" , "City3"]; 
 
     
 
     const tmpl = (country,capital) => ` 
 
      <table><thead> 
 
      <tr><th>Country<th>Capital<tbody> 
 
      ${country.map((cell, index) => ` 
 
       <tr><td>${cell}<td>${capital[index]}</tr> 
 
      `).join('')} 
 
      </table>`; 
 
     tableContent.innerHTML=tmpl(country, capital); 
 
     </script> 
 
    </body> 
 
    </html>

來源

2017-07-04 05:36:37

在JavaScript中使用的模板，嘗試handlebarsjs。

來源

2017-07-04 05:36:52

這是評論而不是答案 – mplungjan

請參閱[這裏]（https://meta.stackexchange.com/a/118694/360908）以瞭解更多關於您是應該發佈答案還是評論的信息 – 2017-07-04 05:49:47

我是男性創建的元素以兩個參數（角色和用戶），這個函數的返回.The可以綁定它在每一個DOM元素的功能，你想

function createTemplate(user,role){ 
 
     var divCalendar=$('<div class="calendaruser"></div>'); 
 
     var buttonElm=$('<button type="button" class="btn btn-default btn-xs">הסר משתמש</button>'); 
 
     var spanElm=$('<span>'+user+'</span>'); 
 
     var divELm=$('<div>'+role+'</div>'); 
 
     divCalendar.append(buttonElm).append(spanElm).append(divELm); 
 
     return divCalendar;  
 
    } 
 

 

 
//Example below: 
 
$('body').append(createTemplate('user_value', 'role_value'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-07-04 05:56:15 liontass

如何在JavaScript上使用模板？

回答

相關問題