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的模板绑定提供了很多的功能和支持,让我们对集合类型的处理更加方便,页面的结构更加清晰,脚本更加简洁。
转载于:https://www.cnblogs.com/4littleProgrammer/p/4814420.html
knockoutJS学习笔记06:ko数组与模板绑定相关推荐
- JavaWeb-综合案例(用户信息)-学习笔记06【复杂条件查询功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
- Effective C++ 学习笔记 第七章:模板与泛型编程
第一章见 Effective C++ 学习笔记 第一章:让自己习惯 C++ 第二章见 Effective C++ 学习笔记 第二章:构造.析构.赋值运算 第三章见 Effective C++ 学习笔记 ...
- JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- MySQL学习笔记06【多表查询、子查询、多表查询练习】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
- XSL学习笔记6 XSLT内置模板规则
XSL学习笔记6 XSLT内置模板规则 定义正确的模板规则来匹配XML树中的节点是XSLT应用的关键.为了让源文档树的节点在没有明确匹配规则的情况下,能够被递归处理,XSLT定义了几个内置的模板规则, ...
- 机器学习实战(Machine Learning in Action)学习笔记————06.k-均值聚类算法(kMeans)学习笔记...
机器学习实战(Machine Learning in Action)学习笔记----06.k-均值聚类算法(kMeans)学习笔记 关键字:k-均值.kMeans.聚类.非监督学习 作者:米仓山下 时 ...
- opencv学习笔记06
原创:opencv学习笔记06 OpenCV-Python教程:50.理解k-近邻 https://www.jianshu.com/p/404e329e4e80 OpenCV里的kNN 1 2 3 4 ...
- ESP32 单片机学习笔记 - 06 - (以太网)Ethernet转Wifi
ESP32 单片机学习笔记 - 06 - (以太网)Ethernet转Wifi 暂停了半个多月的学习,去调车了.现在课设开始了,赶紧回来把一开始的"以太网"目标学完.但是却发现,好 ...
最新文章
- 面向对象笔记2 原型链 解释
- 全国计算机一级ms office考试难吗,全国计算机等级考试一级msoffice难考吗?_联展教育问答...
- 重根迭代法解方程(两种方法)(Python实现)
- 鲲鹏云HCIA知识总结(二)
- notepad运行python为啥与pycharm运行的结果不一样_零基础初学Python,需要装什么软件?...
- CodeForces - 555A Case of Matryoshkas(思维)
- Java动态代理的两种实现方法
- 劲牌——业务流程管理方案
- 期望之后的失望-小评侯捷的《Word排版艺术》
- 轻松学习Linux之入门篇
- Oracle RAC集群增加新共享硬盘并使用AFD的式增加新ASM磁盘组
- PV-RCNN:Point-based与Voexl-based共同成就的高性能3D目标检测网络
- 如何获取手机app的签名
- 可操作 转载 安装cpan软件包软件包
- JavaScript不清不楚之Array.isArray
- 不只是coding_不只是外表
- wps交叉表_利用Excel电子表格制作交叉报表
- java+生成drl文件_java-如何在运行时使drools drl文件访问更新的jar
- 数值计算笔记之非线性方程的求解(一)二分法
- 对硬盘操作的API介绍以及应用测试
热门文章
- python绘制不带颜色曲线图_Python数据可视化库-Matplotlib——折线图,子图绘制
- 安装python3.7.0的步骤_CentOS7下简单安装python3.7.0步骤
- 画箱线图_箱线图的N种画法
- 2018广技师C语言专插本试题,专插本2016广技师C语言专插本考试大纲已核对.doc
- 相机成像原理_数码相机的工作原理
- 哈罗单车怎么关锁还车_好象被哈罗单车套路了,提醒大家小心
- 计算机跨考医学检验技术,医学检验技术考研可以考哪些专业?
- html表格标签高级应用,asp.net core标签助手的高级用法TagHelper+Form
- drawboard pdf拆分文件_PDF处理神器,几秒钟搞定格式转换+压缩+加水印+解密!
- 公差基本偏差代号_螺纹基础知识学习,螺纹公差标准的结构,螺纹公差带与旋合长度...