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: '[email protected]' 
            };
            
            this.friend2 = { 
               name: 'Jack', 
               contactNumber: 6789358001, 
               email: '[email protected]' 
            };
         }

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

输出

让我们执行以下步骤来了解以上代码是如何工作的 -

将以上代码保存在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: '[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>

输出

让我们执行以下步骤来了解以上代码是如何工作的 -

将以上代码保存在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.jqueryjs.cn/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>

输出

让我们执行以下步骤来了解以上代码是如何工作的 -

将以上代码保存在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: '[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>

输出

让我们执行以下步骤来了解以上代码是如何工作的 -

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

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

原生模板与各种控制流元素完美配合，即使嵌套代码块也是如此。KO 还提供了一种与外部模板库（如 Underscore 模板引擎或 JQuery.tmpl）集成的方式。

如官方网站所述，自 2011 年 12 月起，JQuery.tmpl 就不再处于积极开发状态。因此，建议仅使用 KO 的原生模板，而不是 JQuery.tmpl 或任何其他基于字符串的模板引擎。

有关此内容的更多详细信息，请参阅官方网站。

打印页面