Учебники

Прототип — Шаблонирование

Сентябрь 15, 2018

Шаблоны используются для форматирования группы похожих объектов и для получения форматированного вывода для этих объектов.

Prototype предоставляет класс Template , который имеет два метода:

  • Template () — это метод конструктора, который используется для создания объекта шаблона и вызова методаvalu () для применения шаблона.

  • оценивать () — этот метод используется для применения шаблона для форматирования объекта.

Template () — это метод конструктора, который используется для создания объекта шаблона и вызова методаvalu () для применения шаблона.

оценивать () — этот метод используется для применения шаблона для форматирования объекта.

Для создания форматированного вывода необходимо выполнить три шага.

  • Создать шаблон — это включает в себя создание предварительно отформатированного текста. Этот текст содержит форматированное содержимое вместе со значениями # {fieldName} . Эти значения # {fieldName} будут заменены фактическими значениями, когда метод valu () будет вызван с фактическими значениями.

  • Определение фактических значений — включает в себя создание фактических значений в форме ключей и значений. Эти ключи будут отображены в шаблоне и будут заменены соответствующими значениями.

  • Сопоставление ключей и замена значений. Это последний шаг, на котором будет вызываться метод define () , и все ключи, доступные в отформатированном объекте, будут заменены определенными значениями.

Создать шаблон — это включает в себя создание предварительно отформатированного текста. Этот текст содержит форматированное содержимое вместе со значениями # {fieldName} . Эти значения # {fieldName} будут заменены фактическими значениями, когда метод valu () будет вызван с фактическими значениями.

Определение фактических значений — включает в себя создание фактических значений в форме ключей и значений. Эти ключи будут отображены в шаблоне и будут заменены соответствующими значениями.

Сопоставление ключей и замена значений. Это последний шаг, на котором будет вызываться метод define () , и все ключи, доступные в отформатированном объекте, будут заменены определенными значениями.

Example1

Шаг 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>

Это даст следующий результат —

40
Share: