Templates on javascriptの使い方は？

-1

私はdivにhtmlを追加する関数を持っています。Templates on 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

回答またはコメントとして投稿する必要があるかどうかの詳細は、[here]（https://meta.stackexchange.com/a/118694/360908）を参照してください。 –

I 2つの引数（役割とユーザーを）取って要素を作成し、男性機能この機能の【選択リターンあなたはすべての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

Templates on javascriptの使い方は？

答えて

関連する問題