knockoutJS学习笔记06：ko数组与模板绑定

　　前面已经介绍了基本的绑定和模板相关知识，接下来就看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的模板绑定提供了很多的功能和支持，让我们对集合类型的处理更加方便，页面的结构更加清晰，脚本更加简洁。