KnockoutJS - 模板( Templating)

Template是一组可以重复使用的DOM元素。模板化使得构建复杂应用程序变得容易，因为它具有最小化DOM元素重复的特性。

有两种创建模板的方法。

Native templating - 此方法支持控制流绑定，例如foreach，with和if。这些绑定捕获元素中存在的HTML标记，并将其用作随机项的模板。此模板不需要外部库。
String-based templating - KO连接到第三方引擎以将ViewModel值传递到其中，并将生成的标记注入到文档中。例如，JQuery.tmpl和Underscore Engine。

Syntax

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

请注意， type在脚本块中以text/html type提供，以通知KO，它不是可执行块，而只是需要呈现的模板块。

Parameters

可以将以下属性的组合作为参数值发送到模板。

name - 表示模板的名称。
nodes - 这表示要用作模板的DOM节点数组。如果传递name参数，则忽略此参数。
data - 这只是通过模板显示的数据。
if - 如果给定条件导致true或true-like值，将提供模板。
foreach - 以foreach格式提供模板。
as - 这只是在foreach元素中创建一个别名。
afterAdd, afterRender, beforeRemove - 这些都是表示根据执行的操作执行的可调用函数。

观察 (Observations)

渲染命名模板

当与控制流绑定一起使用时，模板由DOM内的HTML标记隐式定义。但是，如果您愿意，可以将模板分解为单独的元素，然后按名称引用它们。

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: 'smith123@gmail.com' 
            };
            this.friend2 = { 
               name: 'Jack', 
               contactNumber: 6789358001, 
               email: 'jack123@yahoo.com' 
            };
         }
         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

让我们执行以下步骤来查看上述代码的工作原理 -

将以上代码保存在template-named.htm文件中。
在浏览器中打开此HTML文件。
这里，friend-template使用了2次。

新页面打开

在模板中使用“foreach”

以下是使用foreach参数和模板名称的示例。

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

Output

让我们执行以下步骤来查看上述代码的工作原理 -

将以上代码保存在template-foreach.htm文件中。
在浏览器中打开此HTML文件。
这里，foreach控件用于模板绑定。

新页面打开

使用asach项的关键字创建别名

以下是如何为foreach项创建别名 -

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

通过创建别名，可以很容易地从foreach循环内部引用父对象。当代码很复杂并且嵌套在多个级别时，此功能非常有用。

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

Output

让我们执行以下步骤来查看上述代码的工作原理 -

将以上代码保存在template-as-alias.htm文件中。
在浏览器中打开此HTML文件。
使用别名而不是数组的全名。

新页面打开

使用afterAdd，beforeRemove和afterRender

在某些情况下，需要在模板创建的DOM元素上运行额外的自定义逻辑。在这种情况下，可以使用以下回调。考虑一下你正在使用foreach元素 -

afterAdd - 当一个新项添加到foreach中提到的数组时调用此函数。

beforeRemove - 在从foreach中提到的数组中删除项目之前调用此函数。

afterRender - 每次呈现foreach并将新条目添加到数组时，都会调用此处提到的函数。

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

Output

让我们执行以下步骤来查看上述代码的工作原理 -

将以上代码保存在template-afterrender.htm文件中。
在浏览器中打开此HTML文件。
这里，每次渲染foreach时都会执行afterProcess函数。

新页面打开

动态选择模板

如果有多个模板可用，则可以通过将名称设置为observable参数来动态选择一个模板。因此，模板值将在名称参数更改时重新评估，然后将重新呈现数据。

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

Output

让我们执行以下步骤来查看上述代码的工作原理 -

将以上代码保存在template-dynamic.htm文件中。
在浏览器中打开此HTML文件。
要使用的模板取决于活动标志值。

新页面打开

使用外部字符串引擎

即使使用嵌套代码块，本机模板也可与各种控制流元素完美配合。 KO还提供了一种与外部模板库集成的方法，例如Underscore模板引擎或JQuery.tmpl。

正如官方网站上所提到的，自2011年12月以来，JQuery.tmpl已不再处于活跃开发阶段。因此，仅建议使用KO的本机模板而不是JQuery.tmpl或任何其他基于字符串的模板引擎。

有关详细信息，请参阅官方网站。

<上一篇.KnockoutJS - 依赖性跟踪( Dependency Tracking)

KnockoutJS - 组件( Components).下一篇>

KnockoutJS - 教程

KnockoutJS - 概述

KnockoutJS - 环境设置( Environment Setup)

KnockoutJS - 应用程序( Application)

KnockoutJS - MVVM框架( MVVM Framework)

KnockoutJS - Observables( Observables)

计算的可观测量(Computed Observables)

KnockoutJS - 声明性绑定( Declarative Bindings)

KnockoutJS - 依赖性跟踪( Dependency Tracking)