如何在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上使用模板？

回答

相关问题