Nguyên mẫu - Tạo mẫu

Các mẫu được sử dụng để định dạng nhóm các đối tượng tương tự và để tạo ra đầu ra được định dạng cho các đối tượng này.

Prototype cung cấp một lớp Template , có hai phương thức:

Template()- Đây là một phương thức khởi tạo, được sử dụng để tạo một đối tượng khuôn mẫu và gọi phương thức eval () để áp dụng khuôn mẫu.
evaluate() - Phương pháp này được sử dụng để áp dụng một khuôn mẫu để định dạng một đối tượng.

Có ba bước liên quan để tạo đầu ra được định dạng.

Create a template- Điều này liên quan đến việc tạo văn bản được định dạng sẵn. Văn bản này chứa nội dung được định dạng cùng với#{fieldName}các giá trị. Những#{fieldName}các giá trị sẽ được thay thế bằng các giá trị thực khi phương thức eval () được gọi với các giá trị thực.
Defining actual values- Điều này liên quan đến việc tạo ra các giá trị thực tế ở dạng Khóa và Giá trị. Các Khóa này sẽ được ánh xạ trong mẫu và sẽ được thay thế bằng các giá trị tương ứng.
Mapping Keys and replacing Values- Đây là bước cuối cùng, nơi eval () sẽ được gọi và tất cả các khóa có sẵn trong đối tượng được định dạng sẽ được thay thế bằng các giá trị đã xác định.

Ví dụ 1

Bước 1

Tạo mẫu.

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

Bước 2

Chuẩn bị bộ giá trị của chúng ta, bộ giá trị sẽ được chuyển vào đối tượng trên để có đầu ra được định dạng.

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

Bước 3

Bước cuối cùng là điền vào tất cả các giá trị trong mẫu và tạo ra kết quả cuối cùng như sau:

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

Vì vậy, hãy đặt tất cả ba bước này lại với nhau -

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

Điều này sẽ tạo ra kết quả sau:

Đầu ra