HTML 페이지 내에 HTML 템플릿을 올바르게 저장할 수 있습니까?

동일한 템플릿에서 Mustache.js를 통해 렌더링되는 작은 템플릿 문자열이 있습니다. 템플릿 용으로 별도의 HTML 파일을 만들 필요가 없습니다. 템플릿을 저장하기위한HTML 페이지 내에 HTML 템플릿을 올바르게 저장할 수 있습니까?

옵션 :

자바 스크립트 변수에 저장하기 : Hackish 여러 문자열 따옴표의 탈출을 많이.
숨겨진 div의 innerHTML로 저장.

2 번 시도했지만 제대로 작동하지 않는 것 같습니다.

바이올린 : http://jsfiddle.net/RHwnq/2/

<html> 
<head></head> 
<body> 
<div id='templates' class='hide' align=""> 
     <div id='tableTemplate'> 
      <table class="table"> 
       {{#name_list}} 
        <tr><td> {{name}} </td></tr> 
       {{/name_list}} 
      </table> 
     </div> 
</div> 

<script> 
var template = $('#tableTemplate').html(); 
console.log(template); 
</script> 

</body> 
</html>

이 로그 대신의

{{#name_list}} 
    {{name}} 
{{/name_list}} 
<table class="table"><tbody><tr><td></td></tr></tbody></table>

는 :

<table class="table"> 
        {{#name_list}} 
         <tr><td> {{name}} </td></tr> 
        {{/name_list}} 
    </table>

이 브라우저에 의해 일부 마크 업 보정으로 인해 수 있습니다. HTML 페이지 내에 HTML 템플릿을 저장하는 다른 유용한 방법은 무엇입니까? 이 같은

출처

2012-11-28 DhruvPathak

같은 파일에 저장하지 않고 AJAX를 통해로드하는 것은 어떨까요? – feeela

@feeela 아니오, 2-3 개의 작은 문자열을로드하기 위해 아약스 호출을하고 싶지 않습니다. 동일한 페이지에 저장하려고합니다. – DhruvPathak

backbone.js/underscore.js와 관련된 일부 자습서에서는 태그 내에 템플릿을 저장했습니다. 이 질문을 자세히 살펴보십시오. http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script – Marc

나는 스크립트 태그에 저장, 그래서 그들은 렌더링되지 않습니다

이

<script id="abc-template" type="text/html"> 
    <h1>{{name}}</h1> 
</script>

당신은 다음과 같이이를 참조 할 수 있습니다 : <script> 태그를 사용

var template = $('#abc-template').html(); 
var html = Mustache.to_html(template, data); 
$('#abc-div').html(html);

출처

2012-11-28 11:46:44

하, 초 만에 같은 해결책 :) –

FML이 나를 구해 줬습니다. 하루 종일. – Worthy7

가 잘 작동 이를 위해 :

<script id="tableTemplate" type="text/html"> 
    <table class="table"> 
    {{#name_list}} 
    <tr><td> {{name}} </td></tr> 
    {{/name_list}} 
    </table> 
</script>

실제로 드롭 인 대체품입니다. 귀하의 var template = $('#tableTemplate').html();

출처

2012-11-28 11:47:18

IDE에 따라 <script></script> 블록 내에 HTML 구문 강조 표시가 나타날 수도 있고 그렇지 않을 수도 있습니다. 나는 당신이 한으로 div 블록을 사용하지만, CSS에

#templates {display: none;}

를 추가합니다.

출처

2017-08-17 18:17:30 abalter

HTML 페이지 내에 HTML 템플릿을 올바르게 저장할 수 있습니까?

답변

관련 문제