KnockoutJS - Templating

Templatelà một tập hợp các phần tử DOM có thể được sử dụng lặp đi lặp lại. Templating giúp dễ dàng xây dựng các ứng dụng phức tạp do tính chất giảm thiểu sự trùng lặp của các phần tử DOM.

Có 2 cách tạo mẫu.

Native templating- Phương pháp này hỗ trợ các ràng buộc luồng điều khiển như foreach, with và if. Các liên kết này nắm bắt đánh dấu HTML hiện có trong phần tử và sử dụng nó làm mẫu cho các mục ngẫu nhiên. Không cần thư viện bên ngoài cho việc tạo khuôn mẫu này.
String-based templating- KO kết nối với công cụ của bên thứ ba để chuyển các giá trị ViewModel vào đó và đưa đánh dấu kết quả vào tài liệu. Ví dụ: JQuery.tmpl và Underscore Engine.

Syntax

template: <parameter-value>

<script type = "text/html" id = "template-name">
   ...
   ...   // DOM elemets to be processed
   ...
</script>

Lưu ý rằng type được cung cấp như text/html trong khối script để thông báo cho KO rằng, nó không phải là một khối thực thi mà chỉ là một khối mẫu cần được hiển thị.

Parameters

Sự kết hợp của các thuộc tính sau đây có thể được gửi dưới dạng tham số-giá trị cho mẫu.

name - Điều này thể hiện tên của mẫu.
nodes- Điều này đại diện cho một mảng các nút DOM được sử dụng làm khuôn mẫu. Tham số này bị bỏ qua nếu tham số tên được truyền.
data - Đây không là gì ngoài dữ liệu được hiển thị qua mẫu.
if - Mẫu sẽ được phân phát nếu điều kiện đã cho dẫn đến giá trị true hoặc giống true.
foreach - Để cung cấp mẫu ở định dạng foreach.
as - Đây chỉ là để tạo một bí danh trong phần tử foreach.
afterAdd, afterRender, beforeRemove - Đây là tất cả để đại diện cho các hàm có thể gọi được thực thi tùy thuộc vào hoạt động được thực hiện.

Quan sát

Hiển thị một Mẫu được đặt tên

Các mẫu được định nghĩa ngầm định bằng đánh dấu HTML bên trong DOM khi được sử dụng với các ràng buộc luồng điều khiển. Tuy nhiên, nếu bạn muốn, bạn có thể chia các mẫu thành một phần tử riêng biệt và sau đó tham chiếu chúng theo tên.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Named Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', data: friend1 }"></div>
      <div data-bind = "template: { name: 'friend-template', data: friend2 }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friend1 = { 
               name: 'Smith', 
               contactNumber: 4556750345, 
               email: '[email protected]' 
            };
            
            this.friend2 = { 
               name: 'Jack', 
               contactNumber: 6789358001, 
               email: '[email protected]' 
            };
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

Lưu mã trên vào template-named.htm tập tin.
Mở tệp HTML này trong trình duyệt.
Ở đây, friend-template được sử dụng 2 lần.

Sử dụng "foreach" trong Mẫu

Sau đây là một ví dụ về việc sử dụng foreach cùng với tên mẫu.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - foreach used with Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', foreach: friends }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = [
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
               { name: 'Lisa', contactNumber: 4567893131, email: '[email protected]' }
            ]
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

Lưu mã trên vào template-foreach.htm tập tin.
Mở tệp HTML này trong trình duyệt.
Ở đây, điều khiển foreach được sử dụng trong liên kết mẫu.

Tạo bí danh Sử dụng làm Từ khóa cho các Mục foreach

Sau đây là cách tạo bí danh cho một mục foreach:

<div data-bind = "template: { 
   name: 'friend-template', 
   foreach: friends, 
   as: 'frnz' 
}"></div>

Dễ dàng tham chiếu đến các đối tượng cha từ bên trong vòng lặp foreach bằng cách tạo bí danh. Tính năng này rất hữu ích khi mã phức tạp và được lồng ở nhiều cấp.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - using alias in Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <ul data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends, 
         as: 'frnz' 
      }"></ul>

      <script type = "text/html" id = "friend-template">
         <li>
            <h3 data-bind = "text: name"></h3>
            <span>Contact Numbers</span>
            <ul data-bind = "template: { 
               name : 'contacts-template', 
               foreach:contactNumber, 
               as: 'cont'
            } "></ul>
            <p>Email-id: <span data-bind = "text: email"></span></p>
         </li>
      </script>

      <script type = "text/html" id = "contacts-template">
         <li>
            <p><span data-bind = "text: cont"></span></p>
         </li>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = ko.observableArray ( [
               { 
                  name: 'Smith', 
                  contactNumber: [ 4556750345, 4356787934 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Jack', 
                  contactNumber: [ 6789358001, 3456895445 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Lisa', 
                  contactNumber: [ 4567893131, 9876456783, 1349873445 ],  
                  email: '[email protected]' 
               }
            ]);
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

Lưu mã trên vào template-as-alias.htm tập tin.
Mở tệp HTML này trong trình duyệt.
Bí danh được sử dụng thay cho tên đầy đủ của mảng.

Sử dụng afterAdd, beforeRemove và afterRender

Có những tình huống trong đó logic tùy chỉnh bổ sung cần được chạy trên các phần tử DOM được tạo bởi mẫu. Trong trường hợp này, có thể sử dụng các lệnh gọi lại sau. Hãy xem xét rằng bạn đang sử dụng phần tử foreach sau đó -

afterAdd - Hàm này được gọi khi một mục mới được thêm vào mảng được đề cập trong foreach.

beforeRemove - Hàm này được gọi ngay trước khi xóa mục khỏi một mảng được đề cập trong foreach.

afterRender - Hàm được đề cập ở đây được gọi mỗi khi foreach được hiển thị và các mục nhập mới được thêm vào mảng.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Use of afterRender Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends , 
         afterRender: afterProcess
      }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
         <button data-bind = "click: $root.removeContact">remove </button>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            self = this;
            this.friends = ko.observableArray ([
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
            ])

            this.afterProcess = function(elements, data){
               $(elements).css({color: 'magenta' });
            }

            self.removeContact = function() {
               self.friends.remove(this);
            }
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

Lưu mã trên vào template-afterrender.htm tập tin.
Mở tệp HTML này trong trình duyệt.
Ở đây, hàm afterProcess được thực thi mỗi khi foreach được hiển thị.

Chọn mẫu động

Nếu có sẵn nhiều mẫu, thì một mẫu có thể được chọn động bằng cách đặt tên là observabletham số. Do đó, giá trị mẫu sẽ được đánh giá lại khi thông số tên thay đổi và đến lượt dữ liệu sẽ được hiển thị lại.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Dynamic Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: whichTemplate, 
         foreach: friends 
      }"></div>

      <script type = "text/html" id = "only-phon">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
      </script>

      <script type = "text/html" id = "only-email">
         <h3 data-bind = "text: name"></h3>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
   
            this.friends = ko.observableArray ([
               {
                  name: 'Smith', 
                  contactNumber: 4556750345, 
                  email: '[email protected]', 
                  active: ko.observable(true)
               },
               
               {
                  name: 'Jack', 
                  contactNumber: 6789358001, 
                  email: '[email protected]', 
                  active: ko.observable(false)
               },
            ]);

            this.whichTemplate = function(friends) {
               return friends.active() ? "only-phon" : "only-email";
            }
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

Lưu mã trên vào template-dynamic.htm tập tin.
Mở tệp HTML này trong trình duyệt.
Mẫu được sử dụng được quyết định tùy thuộc vào giá trị cờ hoạt động.

Sử dụng công cụ dựa trên chuỗi bên ngoài

Native templating hoạt động hoàn hảo với các phần tử luồng điều khiển khác nhau ngay cả với các khối mã lồng nhau. KO cũng cung cấp một cách để tích hợp với thư viện tạo khuôn mẫu bên ngoài chẳng hạn như Công cụ tạo khuôn mẫu dưới điểm nhấn hoặc JQuery.tmpl.

Như đã đề cập trên trang web chính thức JQuery.tmpl không còn được phát triển tích cực kể từ tháng 12 năm 2011. Do đó, khuôn mẫu gốc của KO chỉ được khuyến nghị thay vì JQuery.tmpl hoặc bất kỳ công cụ mẫu dựa trên chuỗi nào khác.

Vui lòng tham khảo trang web chính thức để biết thêm chi tiết về điều này.