<script type =“text / template”>… </ script>에 대한 설명

방금 전에 본 적이없는 것을 우연히 발견했습니다. Backbone.js의 예제 TODO 응용 프로그램 ( Backbone TODO Example ) 의 소스에서 템플릿은의 내부에있었습니다.이 템플릿 <script type = "text/template"></script>에는 PHP에서 보이지만 JavaScript 태그가있는 코드가 포함되어 있습니다.

누군가 나에게 이것을 설명 할 수 있습니까? 이것이 합법적인가요?

이러한 스크립트 태그는 템플릿 기능 (PHP에서와 같이)을 구현하는 일반적인 방법이지만 클라이언트 쪽에서 사용됩니다.

유형을 "text / template"으로 설정하면 브라우저가 이해할 수있는 스크립트가 아니므로 브라우저는 단순히이를 무시합니다. 이를 통해 어떤 것도 넣을 수 있으며 나중에 추출하여 템플릿 라이브러리에서 HTML 스 니펫을 생성하는 데 사용할 수 있습니다.

백본은 특정 템플릿 라이브러리를 사용하도록 강요하지 않습니다 - 꽤 밖으로가있다 : 콧수염 , HAML , 에코 , 구글 폐쇄 템플릿 등 (예에서 사용 된 당신에있다 연결 underscore.js ). 이 스크립트 태그 내에 작성할 수 있도록 고유 한 구문을 사용합니다.

합법적이고 매우 편리합니다!

이 시도:

<script id="hello" type="text/template">
  Hello world
</script>
<script>
  alert($('#hello').html());
</script>

여러 Javascript 템플릿 라이브러리가이 기술을 사용합니다. Handlebars.js 가 좋은 예입니다.

type이외의 스크립트 태그를 설정 text/javascript하면 브라우저는 스크립트 태그의 내부 코드를 실행하지 않습니다. 이것을 마이크로 템플릿이라고합니다. 이 개념은 단일 페이지 응용 프로그램 (일명 SPA)에서 널리 사용됩니다.

<script type="text/template">I am a Micro template. 
  I am going to make your web page faster.</script>

마이크로 템플릿의 경우 스크립트 태그의 유형은입니다 text/template. Jquery 작성자 John Resig에 의해 잘 설명되어 있습니다 http://ejohn.org/blog/javascript-micro-templating/

Box9의 답변에 추가하려면 :

Backbone.js는 John Resig의 원래 마이크로 템플릿을 구현하는 underscore.js에 의존합니다.

Rails와 함께 Backbone.js를 사용하기로 결정했다면 Jammit gem을 확인하십시오. 템플릿의 자산 패키징을 관리하는 매우 깨끗한 방법을 제공합니다. http://documentcloud.github.com/jammit/#jst

기본적으로 Jammit은 JResig의 마이크로 템플릿을 사용하지만 템플릿 엔진을 교체 할 수도 있습니다.

렌더링하거나 정규화하지 않고 HTML에 텍스트를 추가하는 방법입니다.

다음과 같이 추가하는 것과 다르지 않습니다.

 <textarea style="display:none"><span>{{name}}</span></textarea>

<script type = “text/template”> … </script>더 이상 사용되지 않습니다. <template>대신 태그를 사용하십시오 .

jQuery 템플릿은이 메소드를 사용하여 다른 HTML 내부에서 직접 렌더링되지 않는 HTML을 저장하는 예제입니다. http://api.jquery.com/jQuery.template/