handlebars.js 예제

  • このエントリーをはてなブックマークに追加

좋은 기사! 확실히 jS 템플릿의 힘을 사랑. handlebars.js가 어떤 방식으로 간접 조회를 지원하는지 알아 내려고 노력해 왔습니다. 예를 들어 각 도우미는 배열을 반복하는 데 사용됩니다. 도우미의 구문은 {{#each ArrayName}} 사용자 콘텐츠 {{/각}} . 블록 내에서 이 키워드를 사용하여 개별 배열 항목을 참조할 수 있습니다. {{@index}}를 사용하여 배열 요소의 인덱스를 렌더링할 수 있습니다. 아래 예제에서는 각 도우미의 사용을 보여 줍니다. 브라우저가 표준 HTML 주석 안에 있는 내용을 표시하지 않습니다. 이 예제의 데모는 여기에서 찾을 수 있습니다. 사용자 지정 블록 도우미를 등록할 때 Handlebars는 콜백 함수의 마지막 매개 변수로 옵션 개체를 자동으로 추가합니다. 이 옵션 개체에는 개체의 컨텍스트를 일시적으로 변경하여 특정 속성에 액세스할 수 있는 fn() 메서드가 있습니다. studyStatus라는 블록 도우미를 사용 하 여 이전 섹션의 예제를 변경 하자Status 하지만 동일한 컨텍스트 변수: 첫째, npm 설치 핸들 바 -g를 사용 하 여 전역적으로 핸들 바를 설치 해야 합니다. 다른 템플릿은 다른 파일 이름과 .handlebars 확장자 (예 : demo.handlebars)가있는 별도의 파일로 작성되어 있는지 확인하십시오.

이러한 파일 내에서 태그를 사용할 필요가 없습니다. 콜맨, 나는 폴더에 Handlebars.js 파일을 포함하기위한 것입니다. 이 시점에서 HTML에 포함되지 않는 이유는 특정 예제가 핸들바가 아닌 예제이기 때문입니다. «핸들바.js 프로젝트» 부분에서 비핸들 바 프로젝트 비교” 부분에서 URL과 이름 모두에 신발 이름을 사용하고 있습니다. 그러나 비 핸들바 예제에서는 소문자 이름을 URL로 사용하고 핸들바 예제에서 수정되지 않은 이름을 사용하는 것 같습니다. 앞의 설명은 Handlebars.js의 매우 기본적인 사용을 보여 줍니다. 당신이 본 것처럼, 핸들 바를 사용하면 자바 스크립트에서 HTML을 분리 할 수 있었습니다. 이는 응용 프로그램이 더 복잡해짐에 따라 더욱 중요합니다. 쉽게 별도의 템플릿 파일을 개발하고 효과적으로 관리하는 것입니다.

반면, 비 핸들 바 예제는 응용 프로그램이 커질수록 관리하기가 엉망이 될 것입니다. 이전 예제에서 빌드하기 위해 {{ }} 식으로 인쇄하는 모든 데이터는 핸들바에서 HTML을 자동으로 이스케이프합니다. 이것은 훌륭한 보안 기능이지만 원시 HTML을 인쇄하려는 경우가 있습니다. 이 경우 트리플 중괄호 표현식 {{{ }}}를 사용합니다. 블록 도우미는 일반 도우미와 비슷하지만 개구부와 닫는 태그(예: #if 및 #each 내장 태그)가 있습니다. 이러한 도우미는 둘러싸는 HTML 및 콘텐츠를 수정할 수 있습니다. 그들은 만들기 위해 조금 더 복잡하지만, 매우 강력합니다. 기능을 재사용하거나 재사용 가능한 방식으로 큰 HTML 블록을 만드는 데 사용할 수 있습니다(예: 앱의 여러 위치에서 사용하는 항목 목록). 이 태그가 제자리에 있으므로 이를 사용해야 하는 작업을 확인할 수 있습니다. 자바 스크립트 파일에서 우리는 먼저 HTML 문서에서 템플릿을 검색해야합니다. 다음 예제에서는 이 목적을 위해 템플릿의 ID를 사용합니다.

템플릿을 검색한 후 함수를 반환하는 Handlebars.compile() 메서드를 사용하여 컴파일할 수 있습니다. 그런 다음 이 함수는 컨텍스트를 인수로 전달하여 실행됩니다. 실행이 완료되면 함수는 원하는 HTML을 반환하고 모든 변수를 해당 값으로 대체합니다. 이 시점에서 우리는 우리의 웹 페이지에 HTML을 삽입 할 수 있습니다.

  • このエントリーをはてなブックマークに追加