프로토 타입-템플릿

템플릿은 유사한 개체 그룹의 형식을 지정하고 이러한 개체에 대한 형식화 된 출력을 생성하는 데 사용됩니다.

Prototype 은 두 가지 방법이 있는 Template 클래스를 제공합니다.

Template()− 생성자 메서드로 템플릿 객체를 생성하고, 템플릿 을 적용하기 위해 eva () 메서드를 호출 합니다.
evaluate() −이 방법은 개체를 포맷하기 위해 템플릿을 적용하는 데 사용됩니다.

형식화 된 출력을 생성하는 데는 세 단계가 포함됩니다.

Create a template− 여기에는 미리 서식이 지정된 텍스트 생성이 포함됩니다. 이 텍스트에는#{fieldName}가치. 이들#{fieldName}평가 () 메서드가 실제 값으로 호출 될 때 값은 실제 값으로 대체됩니다 .
Defining actual values− 여기에는 키와 값의 형태로 실제 값을 생성하는 것이 포함됩니다. 이러한 키는 템플릿에 매핑되고 해당 값으로 대체됩니다.
Mapping Keys and replacing Values− 이것은 평가 () 가 호출되고 포맷 된 객체에서 사용 가능한 모든 키가 정의 된 값으로 대체되는 마지막 단계 입니다.

예 1

1 단계

템플릿을 만듭니다.

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

2 단계

형식화 된 출력을 갖도록 위의 개체에 전달 될 값 집합을 준비합니다.

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

3 단계

마지막 단계는 템플릿의 모든 값을 채우고 다음과 같이 최종 결과를 생성하는 것입니다.

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

자,이 세 단계를 모두 합쳐 봅시다.

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

이것은 다음 결과를 생성합니다-

산출