KnockoutJS - 模板

上一頁
下一頁

模板是一組可以重複使用的 DOM 元素。由於其最小化 DOM 元素重複的特性，模板使得構建複雜的應用程式變得容易。

建立模板有兩種方法。

  • 原生模板 - 此方法支援控制流繫結，如 foreach、with 和 if。這些繫結捕獲元素中存在的 HTML 標記並將其用作隨機專案的模板。此模板不需要任何外部庫。

  • 基於字串的模板 - KO 連線到第三方引擎將 ViewModel 值傳遞到其中，並將生成的標記注入文件。例如，JQuery.tmpl 和 Underscore Engine。

語法

template: <parameter-value>

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

請注意，在指令碼塊中將type提供為text/html，以通知 KO 它不是可執行塊，而只是一個需要呈現的模板塊。

引數

以下屬性的組合可以作為引數值傳送到模板。

  • name - 表示模板的名稱。

  • nodes - 表示用作模板的 DOM 節點陣列。如果傳遞了 name 引數，則忽略此引數。

  • data - 這僅僅是透過模板顯示的資料。

  • if - 如果給定條件的結果為真或類似真的值，則將提供模板。

  • foreach - 以 foreach 格式提供模板。

  • as - 這只是為了在 foreach 元素中建立別名。

  • afterAdd, afterRender, beforeRemove - 這些都是表示可呼叫函式，具體執行取決於執行的操作。

觀察

渲染命名模板

當與控制流繫結一起使用時，模板由 DOM 內部的 HTML 標記隱式定義。但是，如果需要，可以將模板分解到一個單獨的元素中，然後按名稱引用它們。

示例

即時演示 
<!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: 'smith123@gmail.com' 
            };
            
            this.friend2 = { 
               name: 'Jack', 
               contactNumber: 6789358001, 
               email: 'jack123@yahoo.com' 
            };
         }

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

輸出

讓我們執行以下步驟來了解以上程式碼是如何工作的 -

  • 將以上程式碼儲存在template-named.htm檔案中。

  • 在瀏覽器中開啟此 HTML 檔案。

  • 這裡，friend-template 使用了 2 次。

在模板中使用“foreach”

以下是使用foreach引數以及模板名稱的示例。

示例

即時演示 
<!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: 'smith123@gmail.com' },
               { name: 'Jack', contactNumber: 6789358001, email: 'jack123@yahoo.com' },
               { name: 'Lisa', contactNumber: 4567893131, email: 'lisa343@yahoo.com' }
            ]
         }

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

輸出

讓我們執行以下步驟來了解以上程式碼是如何工作的 -

  • 將以上程式碼儲存在template-foreach.htm檔案中。

  • 在瀏覽器中開啟此 HTML 檔案。

  • 這裡，foreach 控制在模板繫結中使用。

使用 as 關鍵字為 foreach 專案建立別名

以下是為 foreach 專案建立別名的方法 -

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

透過建立別名，可以輕鬆地從 foreach 迴圈內部引用父物件。當代碼複雜且巢狀在多個級別時，此功能很有用。

示例

即時演示 
<!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: 'smith123@gmail.com' 
               },
               
               { 
                  name: 'Jack', 
                  contactNumber: [ 6789358001, 3456895445 ], 
                  email: 'jack123@yahoo.com' 
               },
               
               { 
                  name: 'Lisa', 
                  contactNumber: [ 4567893131, 9876456783, 1349873445 ],  
                  email: 'lisa343@yahoo.com' 
               }
            ]);
         }

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

輸出

讓我們執行以下步驟來了解以上程式碼是如何工作的 -

  • 將以上程式碼儲存在template-as-alias.htm檔案中。

  • 在瀏覽器中開啟此 HTML 檔案。

  • 使用別名代替陣列的全名。

使用 afterAdd、beforeRemove 和 afterRender

在某些情況下，需要在模板建立的 DOM 元素上執行額外的自定義邏輯。在這種情況下，可以使用以下回調。假設您正在使用 foreach 元素，則 -

afterAdd - 當向 foreach 中提到的陣列新增新專案時，將呼叫此函式。

beforeRemove - 在從 foreach 中提到的陣列中刪除專案之前，將呼叫此函式。

afterRender - 此處提到的函式在每次渲染 foreach 並向陣列新增新條目時都會呼叫。

示例

即時演示 
<!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: 'smith123@gmail.com' },
               { name: 'Jack', contactNumber: 6789358001, email: 'jack123@yahoo.com' },
            ])

            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>

輸出

讓我們執行以下步驟來了解以上程式碼是如何工作的 -

  • 將以上程式碼儲存在template-afterrender.htm檔案中。

  • 在瀏覽器中開啟此 HTML 檔案。

  • 這裡，afterProcess 函式在每次渲染 foreach 時都會執行。

動態選擇模板

如果有多個模板可用，則可以透過將名稱設為可觀察引數來動態選擇一個模板。因此，隨著 name 引數的變化，模板值將重新評估，並且資料將重新呈現。

示例

即時演示 
<!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: 'smith123@gmail.com', 
                  active: ko.observable(true)
               },
               
               {
                  name: 'Jack', 
                  contactNumber: 6789358001, 
                  email: 'jack123@yahoo.com', 
                  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>

輸出

讓我們執行以下步驟來了解以上程式碼是如何工作的 -

  • 將以上程式碼儲存在template-dynamic.htm檔案中。

  • 在瀏覽器中開啟此 HTML 檔案。

  • 根據 active 標誌的值決定要使用的模板。

使用外部基於字串的引擎

原生模板與各種控制流元素完美配合，即使巢狀程式碼塊也是如此。KO 還提供了一種與外部模板庫（如 Underscore 模板引擎或 JQuery.tmpl）整合的方式。

如官方網站所述，自 2011 年 12 月起，JQuery.tmpl 就不再處於積極開發狀態。因此，建議僅使用 KO 的原生模板，而不是 JQuery.tmpl 或任何其他基於字串的模板引擎。

有關此內容的更多詳細資訊，請參閱官方網站。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.