KnockoutJS - 模板

模板是一组可以重复使用的 DOM 元素。由于模板具有最小化 DOM 元素重复的特性，因此可以轻松构建复杂的应用程序。

有两种创建模板的方法。

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

句法

template: <parameter-value>

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

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

参数

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

name - 这代表模板的名称。
节点- 这表示用作模板的 DOM 节点数组。如果传递了 name 参数，则忽略此参数。
data - 这只不过是通过模板显示的数据。
if - 如果给定条件产生 true 或类似 true 的值，则将提供模板。
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控件。

创建别名用作 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 文件。
这里，每次渲染 foreach 时都会执行 afterProcess 函数。

动态选择模板

如果有多个可用模板，则可以通过将名称作为可观察参数来动态选择一个模板。因此，随着名称参数的变化，模板值将被重新评估，进而数据将被重新渲染。

例子

现场演示

<!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 文件。
根据活动标志值决定要使用的模板。

使用基于外部字符串的引擎

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

正如官方网站所述，自 2011 年 12 月以来，JQuery.tmpl 已不再进行积极开发。因此，仅建议使用 KO 的本机模板，而不是 JQuery.tmpl 或任何其他基于字符串的模板引擎。

请参阅官方网站了解更多详细信息。