ต้นแบบ - Templating

เทมเพลตใช้สำหรับการจัดรูปแบบกลุ่มของวัตถุที่คล้ายกันและสร้างเอาต์พุตที่จัดรูปแบบสำหรับวัตถุเหล่านี้

Prototype มีคลาสTemplateซึ่งมีสองวิธี -

Template()- นี่คือเมธอด constructor ซึ่งใช้เพื่อสร้างออบเจ็กต์เทมเพลตและเรียกเมธอดeval ()เพื่อใช้เทมเพลต
evaluate() - วิธีนี้ใช้เพื่อใช้เทมเพลตเพื่อจัดรูปแบบวัตถุ

มีสามขั้นตอนที่เกี่ยวข้องในการสร้างเอาต์พุตที่จัดรูปแบบ

Create a template- สิ่งนี้เกี่ยวข้องกับการสร้างข้อความที่จัดรูปแบบไว้ล่วงหน้า ข้อความนี้มีเนื้อหาที่จัดรูปแบบพร้อมด้วย#{fieldName}ค่า เหล่านี้#{fieldName}ค่าจะถูกแทนที่ด้วยค่าจริงเมื่อวิธีการประเมิน ()จะถูกเรียกด้วยค่าจริง
Defining actual values- สิ่งนี้เกี่ยวข้องกับการสร้างค่าที่แท้จริงในรูปแบบของคีย์และค่า คีย์เหล่านี้จะถูกแมปในเทมเพลตและจะถูกแทนที่ด้วยค่าที่เกี่ยวข้อง
Mapping Keys and replacing Values- นี่เป็นขั้นตอนสุดท้ายที่จะเรียกeval ()และคีย์ทั้งหมดที่มีอยู่ในออบเจ็กต์ที่จัดรูปแบบจะถูกแทนที่ด้วยค่าที่กำหนด

ตัวอย่าง 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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เอาต์พุต