handlebars 예제

다음은 데이터 개체를 설정하는 예제와 핸들 바 템플릿에서 이를 반복하는 방법입니다. 핸들바는 콧수염의 최고의 기능을 기반으로 합니다. 그리고 이 중 하나는 문맥의 개념입니다 – 당신이 곱슬 대괄호에 포함하는 속성이 조회되는 객체. 작성하는 모든 템플릿에는 컨텍스트가 있습니다. 최상위 수준에서 컴파일된 템플릿에 전달하는 JavaScript 개체입니다. 그러나 #each 같은 도우미 또는 #with 수정하여 반복된 개체의 속성에 직접 액세스할 수 있습니다. 다음 예제는 상황을 더 명확하게 만듭니다. 이 함수는 페이지 렌더링에 핸들바 컴파일 된 템플릿을 추가합니다 : 함수 (){ / / 컴파일 된 함수 (userAccount_compiledTemplate)를 사용하고 컨텍스트 (데이터 개체)에 전달합니다. 데이터 개체에서 보간된 값입니다. 사용자 정의 핸들 바 도우미는 내장 도우미 블록 및 비취 믹신과 유사합니다. 사용자 지정 도우미를 사용하려면 자바스크립트 함수로 만들고 핸들바 인스턴스에 등록해야 합니다.

기본적으로 핸들바는 값을 이스케이프합니다. 핸들바가 값을 이스케이프하지 않도록 하려면 트리플 중괄호({{{{{및 }}}})를 사용합니다. 핸들바는 HTML 페이지를 동적으로 생성하는 논리가 없는 템플릿 엔진입니다. 그것은 몇 가지 추가 기능을 가진 콧수염의 확장입니다. 콧수염은 완전히 논리가 없지만 핸들바는 이 문서에서 더 자세히 설명할 일부 도우미(예: 각 조력자 및 그 이상)를 사용하여 최소한의 논리를 추가합니다. 사실, 우리는 핸들 바가 콧수염의 슈퍼 세트라고 말할 수 있습니다. 그리고 매개 변수로 키-값 쌍으로 Handlebars 식의 호출 도우미 콜백 함수의 해시 개체에 자동으로 추가 됩니다. 따라서 핸들바에서 블록은 블록 개방({{# }})과 닫기({{/}})가 있는 표현식입니다. 이 주제를 나중에 자세히 연구하면서 도우미에 초점을 맞출 것입니다. 지금은 if 블록이 어떻게 쓰여지는지 살펴보겠습니다.

또한 자주 사용하는 함수와 구문도 살펴보었습니다. 난 당신이 튜토리얼을 즐길 희망당신은이 주제의 좋은 이해를 가지고 포함 된 데모를 사용합니다. 나는 당신의 의견을 읽고 기대합니다. 핸들바는 템플릿 내에서 직접 자바 스크립트를 작성할 수 없습니다. 대신, 그것은 당신에게 도우미를 제공합니다. 템플릿에서 호출할 수 있는 JavaScript 함수이며 코드를 재사용하고 복잡한 템플릿을 만드는 데 도움이 됩니다. 도우미를 호출하려면 표현식으로 만 사용하십시오 – {{도우미 이름}}.