자바스크립트 템플리트팅

JavaScript templating

자바스크립트 템플리트는 자바스크립트 언어로 구현된 클라이언트측 데이터 바인딩 방법을 말한다.이러한 접근방식은 자바스크립트의 사용 증가, 클라이언트 처리 능력 증가, 클라이언트의 웹 브라우저에 컴퓨팅을 아웃소싱하는 경향 덕분에 인기를 얻게 되었다.인기 있는 자바스크립트 템플리트 라이브러리로는 AngulJS, Backback.js, Ember.js, Handlebars.js, Vue.js, Loomes.js 등이 있다.데이터 파일, 흔히 JSON 객체에서 주어진 키 값을 호출하기 위해 이중 곱슬 괄호(즉 {{key})를 사용하는 것이 자주 있다.

예

모든 예제는 외부 파일 사용presidents.json다음과 같은 내용으로

{   "presidents" : [       { "이름": "워싱턴", "이름": "조지", "본인": "1732", "죽음": "1799" },       { "이름": "링컨", "이름": "아브라함", "본인": "1809", "죽음": "1865" }   ] }

모든 예는 다음과 같은 HTML 목록을 생성한다.

  • 워싱턴 (1732-1799)
  • 링컨 (1809-1865)
도서관 HTML 코드 설명

DNA 템플릿 

<>rel="스타일 시트"type="text/css"href=".../template.css"/&gt와 연결되어;<, 스크립트 src=".../jquery.min.js">,<>/script>, <, 스크립트 src=".../jquery.template.min.js">,<>/script>, ➊ 우리가 가장 좋아하는 대통령들은:<>ul id="목표">,<>litemplate="[대통령]"z-var="이름., 태어나지 않았어., 죽음이다."&gt달러{이름}(${ 태어나}-${죽음})<>./li>,<>/ul>, ➋<>script&gt달러 .getJSON('.../Presides.json', 함수(데이터) {$('#target'')템플릿(데이터); }; </script> ➌

∘필요한 jQuery를 포함하여 필요한 리소스 로드
∘HTML 코드template각 하위 플레이트에 대한 속성 표시z-var교체 지침
∘JSON 데이터 로드 위치presidents.json그리고 ID 특성이 "인 HTML 템플릿에 데이터 적용target".

콧수염.js 

<>스크립트 src=".../jquery.min.js">,<>/script>, <, 스크립트 src=".../mustache.min.js">,<>/script>, 우리가 가장 좋아하는 대통령들은:<>➊, ul id="목표">,<>/ul>, ➋<>스크립트 id="president-template"type="text/template">,{{#대통령}}<>li>,{{이름}}({{}}-{{죽음} 태어난})<, /li>,{{/presidents}}<>/script>, ➌<>스크립.t&gt달러 .getJSON(...'.../Presiders.json', 함수(데이터) {var 템플릿 = $('#prism-template').html(); var info = 콧수염.to_properties(to_data, data); $('#target').html(html); (;</script> ➍

➊ 필요한 도서관, 여기 콧수염.js와 jQuery를 실으시오.
③ HTML코드는 생성된 내용을 삽입할 수 있는 "대상"을 제공한다.
〇 "president-template"라는 템플리트 제공
➍ Last는 JSON 데이터를 파악하는 기능으로, 각 사장의 서브아이템에 대해 하나의 템플릿을 파악하여 채워 HTML페이지의 목표 전체를 추가해 최종적으로 선정하는 기능이다.

템플리트는 배포된 정보가 변경될 수 있을 때 유용해지고, 가용 인력에 의해 다양한 HTML 페이지에 유지될 수 없을 정도로 크며, 서버 측면 템플리트를 더 많이 필요로 할 만큼 크지는 않다.

참고 항목

참조

  • JavaScript templates, Mozilla Developer Network, 2013
  • Basavaraj, veena (2012), The client-side templating throwdown: mustache, handlebars, dust.js, and more, Linkedin.com
  • Villalobos, Ray (2012), Introduction to JavaScript Templating (video tutorial) with Mustache.js, ViewSource.com, archived from the original on 2013-05-13
  • Burgess, Andrew (2012), Best Practices When Working With JavaScript Templates, Net.tutsplus.com
  • Landau, Brian (2009), Benchmarking Javascript Templating Libraries
  • http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/
  • Comparison with Other Frameworks, Vue.js, retrieved 11 December 2018