javascript를 사용하여 html 템플릿에서 렌더링 된 문자열을 반환하는 방법은 무엇입니까?

Question

나는 분명히 그것은 string을 반환

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>'; 
} 

아래 같은 자바 스크립트 함수가 있습니다. 그러나 html 템플릿이 복잡해지면 return 문에 모든 것을 넣기가 어렵습니다.

일부 html 파일에서 템플릿을 가지고 (template.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>