template绑定通过模板将数据render到页面。模板绑定对于构建嵌套结构的页面非常方便。 Knockout可以使用流行的jquery.tmpl模板引擎，使用它的话，需要下载jquery.tmpl和jQuery库，然后引入到页面中。而从Knockout2.0开始有了自己的模板框架，虽然功能上不如jquery.tmpl丰富，但也足够满足需要。下面仅从Knockout自己的模板说下，使用方法和jquery.tmpl是相同的。

基本用法

Html代码

<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
   <h3 data-bind="text: name"></h3>
   <p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
     function MyViewModel() {
	     this.buyer = { name: 'Franklin', credits: 250 };
		 this.seller = { name: 'Mario', credits: 5800 };
	 }
	 ko.applyBindings(new MyViewModel());
</script>

使用foreach

Html代码

<div data-bind="template: { name: 'person-template', foreach: people }"></div>

<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
	<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
function MyViewModel() {
     this.people = [
	 { name: 'Franklin', credits: 250 },
	 { name: 'Mario', credits: 5800 }
	 ]
}
ko.applyBindings(new MyViewModel());
</script>

使用afterRender选项

有时候，你需要在模板生成的DOM元素上深度定义逻辑。例如，你可能想再模板输出的时候进行截获，然后在render的元素上允许jQuery UI命令（比如date picker，slider，或其它）。

你可以使用afterRender选项，简单声明一个function函数（匿名函数或者view model里的函数），在render或者重新render模板之后Knockout会重新调用它。如果你使用的是foreach，那在每个item添加到observable数组之后， Knockout会立即调用afterRender的callback函数。例如，

Html代码

<div data-bind="template: { name: 'person-template', data: buyer, afterRender: myPostProcessingLogic  }"></div>

<script type="text/html" id="person-template">
   <h3 data-bind="text: name"></h3>
   <p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
     function MyViewModel() {
	     this.buyer = { name: 'Franklin', credits: 250 };
	     this.myPostProcessingLogic = function (elements) {
                  //添加一些后处理，当前模板render后会执行;
             }
     }
     ko.applyBindings(new MyViewModel());
</script>

动态决定使用哪个模板

有时候，你可能需要根据数据的状态来决定使用哪个模板的ID。可以通过function的返回ID应用到name选择上。如果你用的是foreach模板模式， Knockout会对每个item执行function（将item作为参数）从而将返回值作为ID，否则，该function接受的参数是整个 data option或者是整个view model。

Html代码

<div data-bind="template: { name: displayMode, foreach: people }"></div>

<script type="text/html" id="person-template1">
    <h1>使用person-template1模板</h1>
    <h3 data-bind="text: name"></h3>
	<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/html" id="person-template2">
    <h1>使用person-template2模板</h1>
    <h3 data-bind="text: name"></h3>
	<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
function MyViewModel() {
     this.people = [
	   { name: 'Franklin', credits: 250, active: ko.observable(true)  },
	   { name: 'Mario', credits: 5800, active: ko.observable(false) }
	 ];
	 this.displayMode =  function (employee) {
        return employee.active() ?"person-template1" : "person-template2";
     }

}
ko.applyBindings(new MyViewModel());
</script>

定义了俩个模板：person-template1和person-template2。同时template绑定的name值也不是直接的模板ID，而是一个函数(displayMode)，通过这个函数返回的ID值来选择使用哪个模板。

jQuery.tmpl使用简述

如果要使用引擎，需要同时具备如下js库：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="knockout-x.y.z.js"></script>