KnockoutJS - 模板

KnockoutJS Templating - 从基本概念到高级概念，从简单和简单的步骤学习KnockoutJS，其中包括概述，环境设置，应用程序，MVVM框架，Observables，计算可观察量，声明性绑定，依赖性跟踪，自动UI刷新，模板，组件。

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

有两种创建模板的方法.

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

语法

template:    ...   ...   // DOM elemets to be processed   ...

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

参数

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

name : 这代表模板的名称.
节点 : 这表示要用作模板的DOM节点数组.如果传递了name参数，则忽略此参数.
数据 : 这只是通过模板显示的数据.
if : 如果给定条件产生真实或真实值，则将提供模板.
foreach : 以foreach格式提供模板.
as : 这只是在foreach元素中创建一个别名.
afterAdd，afterRender，beforeRemove : 这些都是为了表示可执行的可调用函数，具体取决于执行的操作.

观察

渲染命名模板

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

示例

         KnockoutJS Templating - Named Template                  Friends List
      Here are the Friends from your contact page:

Contact Number:

Email-id:

输出

让我们执行以下步骤，了解上述代码的工作原理 :

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

Using "foreach" in Template

以下是将foreach参数与模板名称一起使用的示例。

示例

         KnockoutJS Templating - foreach used with Template                  Friends List
      Here are the Friends from your contact page:                              Contact Number: 
         Email-id: 
                     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);

输出

让我们执行以下步骤，看看上面的代码如何工作:

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

Creating alias Using as Keyword for foreach Items

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

它变得容易通过创建别名来引用foreach循环的内部父对象。当代码是复杂的，嵌套在多个层面上，此功能是非常有用的。

示例

         KnockoutJS Templating - using alias in Template                  Friends List
      Here are the Friends from your contact page:                                             Contact Numbers                        Email-id: 
         
                                 
         
                     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);

输出

让我们执行以下步骤，看看上面的代码如何工作

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

Using afterAdd, beforeRemove, and afterRender

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

afterAdd:将新项目添加到foreach中提到的数组时，将调用此函数。

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

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

示例

         KnockoutJS Templating - Use of afterRender Template                        Friends List
      Here are the Friends from your contact page:                              Contact Number: 
         Email-id: 
         remove                      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);

输出

让我们执行以下步骤，看看上面的代码如何工作:

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

Choosing Template Dynamically

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

示例

         KnockoutJS Templating - Dynamic Template                     Friends List
      Here are the Friends from your contact page:                              Contact Number: 
                              Email-id: 
                     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);

输出

让我们执行以下步骤，看看上面的代码如何工作:

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

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

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

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

请参考官方网站了解更多详情.