underscore.js를 템플릿 엔진으로 사용하는 방법은 무엇입니까?

서버 측 언어 및 기능적 언어로 자바 스크립트의 새로운 사용법에 대해 배우려고합니다. 며칠 전 node.js와 express framework에 대해 들었습니다. 그런 다음 underscore.js를 유틸리티 함수 세트로 보았습니다. 이 질문은 stackoverflow에서 보았습니다 . underscore.js를 템플릿 엔진으로 사용할 수 있다고 말합니다. 누구나 고급 자바 스크립트에 대한 경험이 적은 빅인을 위해 템플릿에 underscore.js를 사용하는 방법에 대한 훌륭한 자습서를 알고 있습니다. 감사

밑줄 템플릿에 대해 알아야 할 모든 것이 여기 있습니다 . 명심해야 할 3 가지 사항 :

1. <% %> -일부 코드를 실행
2. <%= %> -템플릿에 일부 값을 인쇄
3. <%- %> -일부 값을 인쇄하려면 HTML 이스케이프

그게 다야.

간단한 예 :

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

그런 다음 tpl({foo: "blahblah"})문자열로 렌더링됩니다<h1>Some text: blahblah</h1>

<!-- Install jQuery and underscore -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<!-- Create your template -->
<script type="foo/bar" id='usageList'>
<table cellspacing='0' cellpadding='0' border='1' >
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <%
        // repeat items 
        _.each(items,function(item,key,list){
          // create variables
          var f = item.name.split("").shift().toLowerCase();
      %>
        <tr>
          <!-- use variables -->
          <td><%= key %></td>
          <td class="<%= f %>">
            <!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->
            <h3><%- item.name %></h3>
            <p><%- item.interests %></p>
          </td>
        </tr>
      <%
        });
      %>
    </tbody>
  </table>
</script>

<!-- Create your target -->

<div id="target"></div>

<!-- Write some code to fetch the data and apply template -->

<script type="text/javascript">
  var items = [
    {name:"Alexander", interests:"creating large empires"},
    {name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"},
    {name:"..."},
    {name:"Yolando", interests:"working out"},
    {name:"Zachary", interests:"picking flowers for Angela"}
  ];
  var template = $("#usageList").html();
  $("#target").html(_.template(template,{items:items}));
</script>

• JsFiddle 감사합니다 @PHearst!
• JsFiddle (최신)
• 첫 번째 문자 (이미지가있는 복잡한 예제, 함수 호출, 하위 템플릿)로 그룹화 된 JsFiddle List는 포크합니다! 즐겨봐...
• 아래 @tarun_telang에 의해 언급 된 XSS 핵의 JSFiddle 데모
• JsFiddle 하위 템플릿을 수행하는 비표준 방법

가장 간단한 형태로 다음과 같이 사용하십시오.

var html = _.template('<li><%= name %></li>', { name: 'John Smith' });
//html is now '<li>John Smith</li>'   

템플릿을 몇 번 사용하려면 더 빠르게 컴파일하고 싶을 것입니다.

var template = _.template('<li><%= name %></li>');

var html = [];
for (var key in names) {
    html += template({ name: names[i] });
}

console.log(html.join('')); //Outputs a string of <li> items

나는 개인적으로 콧수염 스타일 구문을 선호합니다. 이중 중괄호를 사용하도록 템플릿 토큰 마커를 조정할 수 있습니다.

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

var template = _.template('<li>{{ name }}</li>');

템플릿 문서는 부분적입니다. 소스를 보았습니다.

_.template의 기능은 3 개 인수가 :

1. 문자열 텍스트 : 템플릿 문자열
2. 객체 데이터 : 평가 데이터
3. 객체 설정 : 로컬 설정, _.templateSettings 는 전역 설정 객체입니다

데이터 가 제공되지 않으면 (또는 null) 렌더링 함수 보다 반환됩니다. 1 개의 인수가 있습니다.

1. 객체 데이터 : 위 의 데이터 와 동일

설정에는 3 개의 정규식 패턴과 1 개의 정적 매개 변수가 있습니다.

1. RegExp 평가 : 템플릿 문자열에서 "<% code %>"
2. RegExp 보간 : 템플릿 문자열에서 "<% = code %>"
3. RegExp 이스케이프 : "<%-code %>"
4. 문자열 변수 : 선택 사항, 템플리트 문자열 의 데이터 매개 변수 이름

평가 섹션 의 코드는 간단하게 평가됩니다. __p + = "mystring" 명령을 사용 하여이 섹션에서 문자열을 평가 된 템플릿에 추가 할 수 있지만 템플릿 인터페이스의 일부가 아닌 권장되지 않으므로 보간 섹션을 대신 사용하십시오. 이 유형의 섹션은 템플릿에 if 또는 for와 같은 블록을 추가하기위한 것입니다.

보간 섹션 의 코드 결과가 평가 된 템플릿에 추가됩니다. null을 돌려 주면 빈 문자열이 추가됩니다.

탈출 섹션에 HTML을 탈출 _.escape 주어진 코드의 반환 값에. 이외의 유사한 그래서 _.escape (코드) 에서 보간 섹션하지만, 함께 탈출 \ 같은 공백 문자 \ n 가에 코드를 전달하기 전에 _.escape을 . 왜 그렇게 중요한지 모르겠지만 코드에 있지만 공백 문자를 이스케이프하지 않는 보간 및 _.escape 와 잘 작동합니다 .

기본적으로 데이터 매개 변수는 with (data) {...} 문으로 전달되지만 이러한 종류의 평가는 명명 된 변수를 사용한 평가보다 훨씬 느립니다. 그래서 이름 데이터를 와 변수 매개 변수 것은 뭔가 좋은 ...

예를 들면 다음과 같습니다.

var html = _.template(
    "<pre>The \"<% __p+=_.escape(o.text) %>\" is the same<br />" +
        "as the  \"<%= _.escape(o.text) %>\" and the same<br />" +
        "as the \"<%- o.text %>\"</pre>",
    {
        text: "<b>some text</b> and \n it's a line break"
    },
    {
        variable: "o"
    }
);

$("body").html(html);

결과

The "<b>some text</b> and 
 it's a line break" is the same
as the "<b>some text</b> and 
 it's a line break" and the same
as the "<b>some text</b> and 
 it's a line break"

템플릿을 사용하고 기본 설정을 재정의하는 방법에 대한 더 많은 예제를 여기에서 찾을 수 있습니다. http://underscorejs.org/#template

템플릿 로딩에는 많은 옵션이 있지만 결국에는 템플릿을 문자열로 변환해야합니다. 위의 예제와 같이 일반 문자열로 제공하거나 스크립트 태그에서로드하고 jquery 의 .html () 함수를 사용 하거나 require.js 의 tpl 플러그인 을 사용하여 별도의 파일에서로드 할 수 있습니다 .

템플릿 대신 간결하게 돔 트리 를 작성 하는 또 다른 옵션 입니다.

나는 아주 간단한 예를주고있다

1)

var data = {site:"mysite",name:"john",age:25};
var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>";
var parsedTemplate = _.template(template,data);
console.log(parsedTemplate); 

결과는

Welcome you are at mysite.This has been created by john whose age is 25.

2) 템플릿입니다

   <script type="text/template" id="template_1">
       <% _.each(items,function(item,key,arr) { %>
          <li>
             <span><%= key %></span>
             <span><%= item.name %></span>
             <span><%= item.type %></span>
           </li>
       <% }); %>
   </script>

이것은 HTML입니다

<div>
  <ul id="list_2"></ul>
</div>

이것은 json 객체를 포함하고 템플릿을 HTML에 넣는 자바 스크립트 코드입니다.

   var items = [
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       } 
   ];
  $(document).ready(function(){
      var template = $("#template_1").html();
      $("#list_2").html(_.template(template,{items:items}));
  });

표현이 너무 쉽습니다. 필요한 것은 노드 에서 통합 모듈 을 사용하는 것이므로 설치해야합니다.

npm install consolidate --save

다음과 같이 기본 엔진을 html 템플릿으로 변경해야합니다.

app.set('view engine', 'html');

html 확장자에 밑줄 템플릿 엔진을 등록하십시오.

app.engine('html', require('consolidate').underscore);

끝났다 !

이제 'index.html'이라는 템플릿을로드하십시오.

res.render('index', { title : 'my first page'});

밑줄 모듈을 설치해야 할 수도 있습니다.

npm install underscore --save

이것이 도움이 되었기를 바랍니다.

하나 더 중요한 사실을 공유하고 싶었습니다.

<% = variable =>을 사용하면 사이트 간 스크립팅 취약점이 발생합니다. 따라서 대신 <%-variable->을 사용하는 것이 더 안전합니다.

교차 사이트 스크립팅 공격을 방지하기 위해 <% =를 <%-로 바꿔야했습니다. 이것이 성능에 영향을 미치는지 여부는 확실하지 않습니다.

Lodash도 마찬가지입니다. 먼저 다음과 같이 스크립트를 작성하십시오.

<script type="text/template" id="genTable">
<table cellspacing='0' cellpadding='0' border='1'>
        <tr>
            <% for(var prop in users[0]){%>
            <th><%= prop %> </th>
            <% }%>
        </tr>
        <%_.forEach(users, function(user) { %>
            <tr>
                 <% for(var prop in user){%>
                    <td><%= user[prop] %> </td>
                <% }%>

            </tr>
        <%})%>
</table>

이제 다음과 같이 간단한 JS를 작성하십시오.

var arrOfObjects = [];
for (var s = 0; s < 10; s++) {
    var simpleObject = {};
    simpleObject.Name = "Name_" + s;
    simpleObject.Address = "Address_" + s;
    arrOfObjects[s] = simpleObject;
}
var theObject = { 'users': arrOfObjects }
var compiled = _.template($("#genTable").text());
var sigma = compiled({ 'users': myArr });

$(sigma).appendTo("#popup");

여기서 popoup은 테이블을 생성하려는 div입니다.