标签：
前面已经介绍了基本的绑定和模板相关知识，接下来就看ko里的数组和模板绑定，数组和模板绑定应该是实际项目中用得比较多的，ko提供了很好的支持。
一、observaleArray
前面的监控属性都是单个对象，用的是ko.observable；有时候后台返回的是一个列表，也就是数组，这个时候就需要用监控数组了。监控数组与监控属性几乎一样，只不过它是一个数组对象，拥有数组的特点。例如：创建一个简单的监控数组：
var arr = ko.observableArray();
也可以开始就进行初始化：
arr = ko.observableArray([1,2,3]);
普通数组获取长度就是 arr.length，而监控数组与监控属性一样，需要用方法，例如：arr().length。
二、监控数组常见方法
监控数组拥有普通数组的所有方法，用法也基本一样。
2.1 push 增加一个新元素
arr.push(4);
2.2 pop 删除一个元素，并返回这个元素
var v = arr.pop();
2.3 shift 在开始处删除一个元素，并返回这个元素
var v = arr.shift();
2.4 unshift 在开始处增加一个元素
arr.unshift(0);
2.5 reverse 反转数组
arr.reverse();
2.6 sort 数组排序
arr.sort();
可以看到，上面的方法和js里的数组方法一模一样，用法也是一样的。此外，ko还支持另外两个方法，remove 和 removeAll：
remove：移除指定元素或移除指定条件的元素。如：arr.remove(1); 或者 arr.remove(function(item){return item > 1;});
removeAll:移除指定的元素集或移除所有元素。如：arr.removeAll([1,2]); 或者 arr.removeAll();
上面数组的内容只是简单的数据类型，实际也可以复杂的类型。需要注意的是，为了提高性能，监控数组只监控数组对象，而不监控数组元素对象的属性。也就是说，如果arr元素是对象，那么对arr进行的操作会反应到UI（反之也会）；但对arr[0]对象内部的属性的操作，就不会反应到UI（反之也不会）。
二、foreach 绑定
既然是数组，自然就需要遍历输出了。foreach 绑定就是用来遍历集合的，如果集合是空的，会在页面上留下一个空的模板。
2.1 foreach指定要遍历的属性，内部的结构会自动循环绑定。例如：
<div data-bind="foreach:list">
<p>姓名：<span data-bind="text:name"></span>,年龄：<span data-bind="text:age"></span></p>
</div>
2.2 通过 as 关键字为遍历的属性定义别名，这样就可以通过别名对它进行访问。
<ul data-bind="foreach:{data:data,as:‘data‘}">
<li>
<p data-bind="text:name"></p>
<ul data-bind="foreach:{data:contains,as:‘item‘}">
<li>
<p><span data-bind="text:item.name"></span>属于<span data-bind="text:data.name"></span></p>
</li>
</ul>
</li>
</ul>
var data = [
{name:"水果",contains:[{name:"苹果",work:"苹果的作用"},{name:"香蕉",work:"香蕉的作用"}]},
{name:"蔬菜",contains:[{name:"青菜",work:"青菜的作用"},{name:"白菜",word:"白菜的作用"}]}
];
ko.applyBindings(data);
这里要注意，as后面的名称必须加引号。在ko里，凡是作为名称的，都必须加引号，而如果作为对象或者属性的，就不需要。
三、ko 模板绑定
ko 的模板用template指定，template 可以直接指定模板名称，也支持更多选项。
3.1 直接指定模板名称
<div data-bind="template:‘tmpl‘"></div>
3.2 templdate 支持更多的选项，让我们可以更灵活的控制整个渲染过程。
name（必选项） — 需要render的模板ID。
data（可选项） — 需要render到模板的数据。如果你忽略整个参数，KO将查找foreach参数，或者是应用整个view model对象。
foreach（可选项） — 指定KO按照“foreach”模式render模板。
afterAdd或beforeRemove（可选项） — 在foreach模式下使用callback函数。
templateOptions（可选项） — 在render模板的时候，传递额外数据以便使用。
<div data-bind="template:{name:‘koPersonList‘,foreach:list}"></div>
<script type="text/tmpl" id="koPersonList">
<p>姓名：<span data-bind="text:name"></span>,年龄：<span data-bind="text:age"></span></p>
</script>
另外，template里的name 属性不只可以写死为一个模板名称，还可以是一个方法属性，由它来动态决定使用哪个模板。例如下面的例子，在遍历的时候，会根据名称来决定使用哪个模板。
<div data-bind="template:{name:display,foreach:list}"></div>
this.display = function(item){
if(item.name() === "tom1"){
return "tmpl1";//使用模板1渲染
}
return "tmpl2";//使用模板2渲染
}
三、结合jqtmpl
集合类型通常要进行遍历渲染，之前我们已经写过模板引擎了，也介绍了jsRender，都支持循环遍历。ko 默认支持的jqtmpl模板。简单介绍一下jqtmpl，它的 tag 有：
${变量} ： 输出变量值
${{html 变量}} ：输入变量html
${{if condition}}...${{else condition}}...${{else}}...${{/if}} ：if-else 判断
${{each(index,item) 集合}...${{/each}} ：遍历
可以看出，jqtmpl和jsRender的结构是非常像。我们用template集合jqtmpl看两个例子。
例子1：
<div data-bind="template:‘person‘"></div>
<script type="text/tmpl" id="person">
<p>姓名：${name},年龄：${age}</p>
</script>:
例子2：
<div id="" data-bind="template:{name:‘personList‘,foreach:list}"></div>
<script type="text/tmpl" id="personList">
<p>姓名：${name},年龄：${age}</p>
</script>
function Person(name,age){
this.name = name;
this.age = age;
}
function ViewModel(){
this.list = [
new Person("tom",18),
new Person("jack",20),
new Person("lucy",22)];
}
ko.applyBindings(new ViewModel());
注意：和jqtmpl一起使用时，ko.js必须先引入，后再引入jqtmpl.js，否则会没有效果。
上面的例子就是把ko的输出方式，换成jqtmpl的输出方式，结果是一样的。那么使用<span data-bind="text:someObservableValue"></span> 与 ${someObservableValue} 有什么区别呢？
当模板内部使用data-bind属性的时候，KO是单独为这个绑定单独跟踪依赖项的。当model改变的时候，KO只会更新绑定的元素以及子元素而不需要重新render整个模板。所以如果你声明这样的代码是<span data-bind=‘text: someObservableValue‘></span>，当 someObservableValue改变的时候，KO将只是简单地更新<span>元素的text值而不需要重新render整个模板。
不过，如果模板内部使用的observable值（例如${ someObservableValue }），如果这个observable值改变了，那KO将重新render整个模板（这往往不是我们想要的）。
这就是说，很多情况下<span data-bind=‘text: someObservableValue‘></span>性能要比${ someObservableValue }要好，因为值改变的话不会影响临近元素的状态。不过${ someObservableValue }语法比较简洁，如果你的模板比较小的话，还是更合适的，不会带来大的性能问题。
五、用ko模板完成开篇的demo
开篇我们用了多种方式完成一个简单的demo，这样用ko来完成相同的功能。
html:
<div id="main">
<div id="title">所有课程</div>
<ul id="course" data-bind="template:{name:‘courseTmpl‘,foreach:courseList}"></ul>
</div>
模板：
<script type="text/tmpl" id="courseTmpl">
<li>
<a data-bind="attr:{href:‘Default.aspx?courseID=‘+CourseID}">
<div class="course-img">
<img data-bind="attr:{src:IconPath,alt:CourseName}"/>
</div>
<div class="course-info">
<div class="names">
<span data-bind="text:CourseName"></span>
<span data-bind="text:TeacherName" class="fr"></span>
</div>
<div class="pros">
<span data-bind="text:CreatedDate"></span>
<span class="fr"><span data-bind="text:StudyNumber"></span>人学习</span>
</div>
</div>
</a>
</li>
</script>
js:
function CourseInfoVM(){
var self = this;
this.courseList = ko.observableArray();
}
var courseInfoVM = new CourseInfoVM();
ko.applyBindings(courseInfoVM,document.getElementById("course"));
window.Tester.callback(function(data){
courseInfoVM.courseList(data);
})
六、总结
ko的模板绑定提供了很多的功能和支持，让我们对集合类型的处理更加方便，页面的结构更加清晰，脚本更加简洁。
标签：
原文地址：http://www.cnblogs.com/4littleProgrammer/p/4814420.html
