노드 오픈 소스 템플릿에는 많은 옵션이 있지만 나와 같은 노인은 EJ를 사용하는 것이 좋습니다. 클래식 ASP/PHP/JSP에서 경험이있는 EJ를 사용하는 것은 당연합니다. 즉, <%...%> 블록으로 JavaScript 코드를 정렬하고 가장 전통적인 방식으로 <%= 출력 변수%>를 사용할 수 있습니다 (또한 <%-출력 변수는 &와 같은 기호를 피하지 않습니다). EJS 설치 명령은 다음과 같습니다.
NPM EJS 설치
JS 전화
JS가 불리는 두 가지 주요 방법이 있습니다.
ejs.compile (str, 옵션); // => 함수 ejs.render (str, 옵션); // => str
실제로 EJ는 Express와 독립적으로 사용될 수 있습니다.
var ejs = require ( ''), str = require ( 'fs'). readfilesync (__ dirname + '/list.ejs', 'utf8'); var ret = ejs.render (str, {이름 : [ 'foo', 'bar', 'baz']}); Console.log (ret); ejs.render ()를 참조하십시오. 첫 번째 매개 변수는 템플릿의 문자열이고 템플릿은 다음과 같습니다. < %if (names.length) { %> <ul> < %names.foreach (function (name) { %> <li foo = '< %= name + "'" " %> '>'> < %= 이름 %> </li> < %}) %> </ul> < %} %>이름은 로컬 변수가됩니다.
옵션 매개 변수
두 번째 매개 변수는 데이터이며 일반적으로 객체입니다. 이 객체는 옵션으로 간주 될 수 있습니다. 즉, 데이터와 선택이 동일한 객체에 있음을 의미합니다.
매번 디스크를 원하지 않으면 템플릿을 캐시하고 옵션을 설정해야합니다. 예를 들어:
var ejs = require ( '../'), fs = require ( 'fs'), path = __dirname + '/functions.ejs', str = fs.readfilesync (path, 'utf8'); var 사용자 = []; user.push ({name : 'tobi', age : 2, species : 'ferret'})) users.push ({name : 'loki', age : 2, 종 : 'ferret'}) users.push ({Jane ', age : 6, 종 :'ferret '} ejs.render (users : user : filename : prat}); Console.log (ret);inculde 명령
그리고 당신이 원한다면
<ul> < % user.foreach (function (user) { %> < % 포함 사용자/show %> < %}) %> </ul>일반적으로 공통 템플릿을 삽입하는 것, 즉 파일을 소개하려면 포함 기능을 시작하려면 파일 이름 옵션을 설정해야합니다. 그렇지 않으면 포함 된 디렉토리를 알지 못합니다.
주형:
<h1> 사용자 </h1> < %함수 사용자 (사용자) { %> <li> <strong> < %= user.name %> </strong>는 < %= user.age %> and old < %= user.species %>.EJS는 컴파일 템플릿을 지원합니다. 템플릿 컴파일 후 IO 작동이 없으므로 매우 빠르며 로컬 변수에 사용할 수 있습니다. 다음 예제 사용자/쇼는 EJS 확장을 무시합니다.
<ul> < % user.foreach (function (user) { %> < % 포함 사용자/show %> < %}) %> </ul>커스텀 클로즈 토큰
<h1> {{= title}} </h1> 일반적으로 비-%%> 태그를 사용하려는 경우 사용자 정의 할 수도 있습니다.
var ejs = 요구 ( 'ejs'); ejs.open = '{{'; ejs.close = '}}'; 형식 출력도 괜찮습니다. ejs.filters.last = function (obj) {return obj [obj.length -1]; }; 라고 불리는:<p> <%= : 사용자 | 마지막 %> </p>EJS는 또한 브라우저 환경을 지원합니다.
<html> <head> <script src = "../ ejs.js"> </script> <script id = "script id ="user "type ="text/template "> < %if (names.length) { %> <ul> < %names.foreach (function (name) { %> <li> < % %=/li> < %}) </ul> < %} %> < %} %> < %}} onload = function () {var users = document.getElementById ( '사용자'). innerHtml; var names = [ 'loki', 'tobi', 'jane']; var html = ejs.render (user, {names : names}); document.body.innerhtml = html; } </script> </head> <body> </body> </html> EJ가 다층 JSON 개체를 출력 할 수 있는지 궁금합니다.그건 그렇고, 일부 네티즌은 JQ 마스터 John이 몇 년 전에 20 줄 템플릿을 썼다는 사실을 밝혔습니다.
간단하고 실용적인 JS 템플릿 엔진
50 라인 미만의 JS 템플릿 엔진은 다양한 JS 구문을 지원합니다.
<script id = "test_list"type = "text/html"> <%= for (var i = 0, l = p.list.length; i <l; i ++) {var stu = p.list [i]; =%> <td> <td <%= if (i == 0) {=%> <%=} =%>> <%== stu.name =%> </td> <td> <%== stu.age =%> </td> <td> <%== (stu.address || '') =%> <tr> <%=}}}"<%= xxx =%>"은 JS 로직 코드이며 "<%== xxx =%>"는 PHP에서 Echo의 기능과 유사한 직접 출력 변수입니다. "P"는 다음 빌드 메소드를 호출 할 때 KV 객체 매개 변수입니다. "New JTEMP"를 호출 할 때 다른 매개 변수 이름으로 설정할 수도 있습니다.
라고 불리는:
$ (function () {var temp = new jtemp ( 'test_list'), html = temp.build ({list : [{name : 'zhang san', age : 13, jod $ ( 'table'). html (html);상기 온도가 생성 된 후, 빌드 방법은 HTML을 생성하기 위해 여러 번 호출 될 수 있습니다. 다음은 템플릿 엔진의 코드입니다.
var jtemp = function () {function temp (htmlid, p) {p = p || {}; // 구성 정보, 대부분의 경우 this.htmlid = htmlid; this.fun; this.oname = p.oname || '피'; this.temp_s = p.temps || '<%='; this.temp_e = p.tempe || '=%>'; this.getfun (); } temp.prototype = {getfun : function () {var _ = this, str = $ ( '#' + _.htmlid) .html (); if (! str) _.err ( '오류 : 온도 없음 !!'); var str_ = 'var' + _.oname + '= this, f =/'/';', s = str.indexof (_. temp_s), e = -1, p, sl = _.temp_s.length, el = _.temp_e.length; for (; s> = 0;) {e = str.indexof (_. temp_e); if (e <s) alert ( ':( 오류 !!'); str_ += 'f +=/' ' +str.substring (0, s) +'/';'; p = _.trim (str.substring (s +sl, e)); if (p.indexof ( '=')! == 0) {// js state str_ += p; p.substring (1)} str.substring (e + el); }, function (p).핵심은 템플릿 코드를 문자열과 데이터 호출 기능을 수행 할 때마다 함수로 변환하는 것입니다.
주로 휴대 전화 (WebKits)에 사용되기 때문에 문자열 스 플라이 싱 효율은 고려되지 않습니다. IE에서 사용해야하는 경우 문자열 스 플라이 싱 방법을 Array.push () 형태로 변경하는 것이 가장 좋습니다.
EJS 템플릿 레이아웃 레이아웃
1. 기본 레이아웃을 사용하지 않으려는 경우 직접 지정할 수 있습니다. 예를 들어:
res.render ( "index", { "title": "test", "layout": "main"}); // 또는 res.render ( "index", { "title": "test", "레이아웃": "main.ejs"});2. 레이아웃을 사용하지 않으려면 레이아웃을 False로 설정할 수 있습니다.
res.render ( "index", { "layout": false});3. 각 요청이 별도로 설정되기를 원하지 않는 경우. 글로벌 설정을 사용할 수 있습니다.
app.set ( "보기 옵션", { "레이아웃": false});4. EJS에서는 기본 결산 태그가 < % .. %>이며, 우리는 자체 태그를 정의 할 수도 있습니다. 예를 들어:
app.set ( "보기 옵션", { "Open": "{{", "close": "}}"});5. 로컬 레이아웃
웹 응용 프로그램에서는 각 사용자의 주석을 반복적으로 표시 해야하는 사용자 주석 기능과 같은 특정 컨텐츠를 반복적으로 표시해야합니다. 현재 우리는 루프를 통해이를 달성 할 수 있습니다. 그러나 [부분 템플릿] (부분)을 사용하여 구현할 수도 있습니다. 예를 들어:
먼저 로컬 템플릿을 만듭니다 ./views/comment.ejs :
<div> <div> <%= comment.user%> </div> <div> <%= comment.content%> </div> </div>
참고 : 다음은 주석입니다 .xxxx
그런 다음 ./views/index.ejs에서 partial을 통해 댓글을 호출하십시오
이것은 <%= title%>입니다! <br/> <%- 부분 ( "댓글", 댓글)%>
참고 : 다음은 부분적입니다 ( "comment.ejs", 댓글); <- 단어는 복수형이어야합니다.
마지막으로 라우터에서 index.ejs를 호출하십시오.
app.get ( "/", function (req, res) {res.render ( "index", {title ":"test ","layout ": false,"comments ": [{"user ":"gainover ","content ":"test1 "}, {"user ":"Zongzi ","content ":"test2 "},"test2 "} :"maomao "": "", "": "", "": "use": "test2"}. ]});});참고 : 코드의 주석은 index.ejs의 주석 변수 이름과 동일하며 부분적으로 호출 된 주석.
목록이 표시되면 일반적으로 발생하는 시나리오는 첫 번째 요소 또는 마지막 요소를 특별히 표시하는 것입니다. 부분적으로는 내장 변수를 Express의 변수를 사용하여 현재 객체가 첫 번째 요소인지 마지막 요소인지 확인할 수 있습니다.
<div> <div> <%= comment.user%> </div> : <div> <%= comment.content%> </div> </div>
이런 식으로, 첫 번째 주석의 클래스에는 추가적인 첫 번째 시설이있을 것입니다.
유사한 내장 변수는 다음과 같습니다.
(1) 첫 번째 컬렉션은 배열의 첫 번째 요소 인 경우 사실입니다.
(2) indexincollection 배열에서 현재 요소의 인덱스
(3) LastIncollection은 배열의 마지막 요소 인 경우 사실입니다.
(4) CollectionLength
마지막으로 부분적으로 템플릿을 호출 할 때 경로 검색 문제가 있습니다.
(1) 부분 ( "편집")은 동일한 디렉토리에서 edit.ejs 파일을 찾습니다.
(2) partial ( "../ message")은 이전 레벨 디렉토리의 Message.ejs 파일을 찾습니다.
(3) 부분 ( "사용자")은 users.ejs 파일을 찾습니다. user.ejs가 존재하지 않으면 /users/index.ejs 파일이 검색됩니다.
(4) < %= user %>는 내용을 피할 수 있습니다. 탈출하려면 < %-usser %>를 사용할 수 있습니다.