Prototip - Şablon Oluşturma

Şablonlar, benzer nesnelerin grubunu biçimlendirmek ve bu nesneler için biçimlendirilmiş çıktı üretmek için kullanılır.

Prototype , iki yöntemi olan bir Template sınıfı sağlar -

Template()- Bu, bir şablon nesnesi oluşturmak ve şablonu uygulamak için eval () yöntemini çağırmak için kullanılan bir yapıcı yöntemidir .
evaluate() - Bu yöntem, bir nesneyi biçimlendirmek için bir şablon uygulamak için kullanılır.

Biçimlendirilmiş çıktıyı oluşturmak için üç adım vardır.

Create a template- Bu, önceden biçimlendirilmiş metin oluşturmayı içerir. Bu metin, biçimlendirilmiş içeriğin yanı sıra#{fieldName}değerler. Bunlar#{fieldName}zaman, gerçek rakam ile değiştirilecektir () değerlendirmek yöntem, gerçek değerler ile çağrılır.
Defining actual values- Bu, Anahtarlar ve Değerler biçiminde gerçek değerler oluşturmayı içerir. Bu Anahtarlar şablonda eşlenecek ve karşılık gelen değerlerle değiştirilecektir.
Mapping Keys and replacing Values- Bu, eval () ' un çağrılacağı ve biçimlendirilmiş nesnede bulunan tüm anahtarların tanımlanan değerlerle değiştirileceği son adımdır .

Örnek 1

Aşama 1

Bir şablon oluşturun.

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

Adım 2

Biçimlendirilmiş bir çıktıya sahip olmak için yukarıdaki nesnede geçirilecek olan değer setimizi hazırlayın.

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

Aşama 3

Son adım, şablondaki tüm değerleri doldurmak ve aşağıdaki gibi nihai sonucu üretmektir -

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

Öyleyse, tüm bu üç adımı bir araya getirelim -

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

Bu, aşağıdaki sonucu verecektir -

Çıktı