javascriptを使用してhtmlテンプレートからレンダリングされた文字列を返す方法は？

Question

私は

function format(d) { 
    // `d` is the original data object for the row 
    return '<div class="expandedRow" style="padding: 10px; border-style: solid; border-width: 0px 1px; border-color: #f0f0f0;">' + 
    '<table cellpadding="5" cellspacing="0" border="0" style="width: 100%;">' + 
    '<tr>' + 
    '<td>Full name:</td>' + 
    '<td>' + d.name + '</td>' + 
    '</tr>' + 
    '<tr>' + 
    '<td>Extension number:</td>' + 
    '<td>' + d.extn + '</td>' + 
    '</tr>' + 
    '<tr>' + 
    '<td>Extra info:</td>' + 
    '<td>And any further details here (images etc)...</td>' + 
    '</tr>' + 
    '</table>'+ 
    '<div>'; 
} 

以下のようなJavaScript関数は明らかにそれがstringを返しています。 しかし、htmlテンプレートはより複雑になるので、すべてをreturn文に入れるのは難しいです。

テンプレートを（template.html）というhtmlファイルに作成し、パラメータ 'd'のテンプレートをレンダリングして結果の文字列を返す方法はありますか？

私は

return renderTemplate('template.html', d); 

Answer 1

Jquery template pluginのようなものを考えていますが、この仕事のために右です。

あなたは

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <b>${Name}</b> (${ReleaseYear}) 
    </li> 
</script> 

（あなたの例のように引用符なし）スクリプトブロック内のHTMLテンプレートを配置し、そこにデータセットを適用します。

<script type="text/javascript"> 
    var movies = [ 
     { Name: "The Red Violin", ReleaseYear: "1998" }, 
     { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
     { Name: "The Inheritance", ReleaseYear: "1976" } 
    ]; 
    $("#movieTemplate").tmpl(movies) 
     .appendTo("#movieList"); 
</script>