Prototipe - Templating

Templat digunakan untuk memformat grup objek serupa dan untuk menghasilkan keluaran yang diformat untuk objek ini.

Prototipe menyediakan kelas Template , yang memiliki dua metode -

Template()- Ini adalah metode konstruktor, yang digunakan untuk membuat objek template dan memanggil metode evalu () untuk menerapkan template.
evaluate() - Metode ini digunakan untuk menerapkan template untuk memformat objek.

Ada tiga langkah yang terlibat untuk membuat keluaran yang diformat.

Create a template- Ini melibatkan pembuatan teks yang telah diformat sebelumnya. Teks ini berisi konten yang diformat bersama dengan#{fieldName}nilai-nilai. Ini#{fieldName}nilai akan diganti dengan nilai aktual ketika metode evalu () akan dipanggil dengan nilai aktual.
Defining actual values- Ini melibatkan pembuatan nilai aktual dalam bentuk Kunci dan Nilai. Kunci ini akan dipetakan dalam template dan akan diganti dengan nilai yang sesuai.
Mapping Keys and replacing Values- Ini adalah langkah terakhir di mana evaluasi () akan dipanggil dan semua kunci yang tersedia dalam objek yang diformat akan diganti dengan nilai yang ditentukan.

Contoh 1

Langkah 1

Buat template.

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

Langkah 2

Siapkan kumpulan nilai kita, yang akan diteruskan pada objek di atas untuk mendapatkan keluaran yang telah diformat.

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 ];

LANGKAH 3

Langkah terakhir adalah mengisi semua nilai di template dan menghasilkan hasil akhir sebagai berikut -

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

Jadi, mari gabungkan ketiga langkah ini -

<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>

Ini akan menghasilkan hasil sebagai berikut -

Keluaran