Question

我有一个将html添加到div的功能。

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

我正在寻找更好的方法来使用该模板。

Answer 1

您可以使用模板文字：

一点点样本：

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

Answer 2

要在javascript中使用模板，请尝试handlebarsjs。

Answer 3

我是一个创建带有两个参数（角色和用户）的元素的函数。返回此函数可以将它绑定在你想要的每个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>

如何在JavaScript上使用模板？

3 个答案: