underscore.js template

• Unserscorejs.org #template

underscore template

_.template(templateString, [settings])

JavaScript 템플릿을 렌더링을 위해 평가할 수있는 함수로 컴파일합니다. JSON 데이터 소스에서 복잡한 HTML 비트를 렌더링하는 데 유용합니다. 템플릿 함수는 <%= ... %>를 사용하여 값을 삽입하고 <% ... %>와 함께 임의의 JavaScript 코드를 실행할 수 있습니다. 값을 보간하고 HTML 이스케이프 처리하려면 <%- ... %>를 사용하십시오. 템플릿 함수를 평가할 때 템플릿의 자유 변수에 해당하는 속성을 가진 데이터 객체를 전달하십시오. 설정 인수는 재정의되어야하는 _templateSettings를 포함하는 해시 여야합니다.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<%- value %>");
template({value: '<script>'});
//=> "<script>"

자바 스크립트 코드 내에서 인쇄물을 사용할 수도 있습니다. 이것은 <%= ... %>를 사용하는 것보다 때때로 더 편리합니다.

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
//=> "Hello stooge"

ERB 스타일 구분 기호가 차 한잔이 아닌 경우에는 언더 코어의 템플릿 설정을 변경하여 다른 기호를 사용하여 보간된 코드를 설정할 수 있습니다. 그대로 삽입해야하는 표현식, HTML 이스케이프 처리 후 삽입해야하는 표현식을 일치시키는 이스케이프 정규 표현식 및 결과 문자열에 삽입하지 않고, 평가되어야하는 표현식을 일치시키는 평가 정규식과 일치하는 보간 정규 표현식을 정의하십시오. 세 가지 조합을 정의하거나 생략 할 수 있습니다. 예를 들어, Mustache.js 스타일 템플릿을 수행하려면 다음을 수행하십시오.

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
//=> "Hello Mustache!"

기본적으로 템플릿은 with 문을 통해 로컬 범위의 데이터 값을 배치합니다. 그러나 변수 설정으로 단일 변수 이름을 지정할 수 있습니다. 이렇게하면 템플릿을 렌더링 할 수있는 속도가 크게 향상 될 수 있습니다.

_.template("Using 'with': <%= data.answer %>", {variable: 'data'})({answer: 'no'});
//=> "Using 'with': no"

템플릿을 미리 컴파일하면 재현 할 수없는 오류를 디버깅 할 때 큰 도움이 될 수 있습니다. 미리 컴파일 된 템플릿은 줄 번호와 스택 추적을 제공 할 수 있기 때문에 클라이언트에서 템플릿을 컴파일 할 때는 불가능합니다. 소스 속성은 컴파일 된 템플릿 함수에서 사용 가능하므로 쉽게 미리 컴파일 할 수 있습니다.

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>