【Knockout.js 学习体验之旅】(3)模板绑定
本文是【Knockout.js 学习体验之旅】系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0)。小茄才识有限,文中若有不当之处,还望大家指出。
目录:
模板引擎
页面是由数据和HTML组件构成的,如何将数据嵌入到HTML组件里面呢?一个比较好的选择是使用模板技术。
回顾下第一篇(【Knockoutjs 学习体验之旅】(1)ko初体验)开头的总价计算:
<!--HTML Code-->
<div class="counter">
Price: <input type="text" data-bind="{value: price, valueUpdate: 'afterkeydown'}" placeholder="请输入单价" /><br />
Account: <input type="text" data-bind="textInput: account" placeholder="请输入个数" /><br />
sum: <span data-bind="text: sum"></span>
</div>
这就是一个简单的组件,他有自己的内部结构,有自己的事件处理机制。假如我需要使用很多个这样的组件,那肯定不会是将上面的HTML代码复制 n 遍插入到不同的地方吧,况且单纯复制还不行,还要将变量区分开呢!如果是在一个列表里面,那可以用 foreach 来做,如果是要用在不同的容器内,那就要使用模板引擎技术了。
模板技术并不是什么高深的东西,有基于字符串拼接技术的,有基于 DOM 节点的,还有混合着的。更具体的介绍可以看一看这个轮子哥的文章 http://www.tuicool.com/articles/qMJ77r,楼主就不班门弄斧了。knockout.js 也是基于DOM节点的模板技术,编译之后 view 与 data 还是保持绑定关系,可以简单方便地更新数据到 view 层。另外你也可以将 knockout.js 链接到第三方的模板引擎,如 jquery.tmpl 和 Underscore等模板引擎。
下面简单讲讲ko中模板绑定的使用,第三方的集成引用不在本文讨论范围内。
knockout.js 的模板绑定
先看一个例子:
<h2>Participants</h2> Here are the participants:
<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>
<script type="text/html" id="person-template">这个script脚本标签定义了一个 id 为"person-template"的模板,ko就是通过这个 id 来寻找相应的模板。注意这个脚本的 type 是"text/html",所以才能跟正常的脚本区分开。ko不会自动绑定在这种脚本内的代码,只有在这个模板被使用的时候才会去绑定。
使用方法:HTML元素中使用 data-bind 绑定用到的模板,在 js 中定义相应的数据并应用该绑定。可以看到上面的"person-template"被引用了两次,一次使用的是buyer的数据,另一次使用了seller数据。下面简单说说模板绑定中用到的参数:
- name — 指定你要渲染的模板片段,跟模板脚本中的 id 相对应。
- nodes — 直接传递一个DOM节点数组作为模板使用。传递的DOM节点数列应该是不被监控的,因为渲染过程中会对这个节点数列进行复制赋值等操作。而且如果这个节点数组有父级节点的话也会被移除。当我们传递了一个非空的name值时,nodes选项会被忽略,所以很少会用到这个属性。
- data — 用来作为渲染数据的对象。如果你忽略整个参数,KO将查找foreach参数,或者是应用整个view model对象。
- if — 与上一篇中的 if 作用类似,只有当 if 后的表达式为真时才会渲染模板,用于防止一个空可观察对象在模板被填充之前被绑定。
- foreach — 按照“foreach”模式渲染模板。
- as — 结合foreach使用的时候,指定每项渲染数据的别名,主要是用于定义数据范围方便在嵌套绑定里面使用。
- afterRender, afterAdd, or beforeRemove — 渲染时的回调函数。
下面简单简单介绍一下几种用法。
一些例子
- 使用 foreach 渲染 ViewModel中的所有数据
<h2>Participants</h2>
Here are the participants:
<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> function MyViewModel() {
this.people = [
{ name: 'Franklin', credits: 250 },
{ name: 'Mario', credits: 5800 }
]
}
ko.applyBindings(new MyViewModel());
这个例子跟上面的例子效果是一样的,使用 foreach 会将所有数据都渲染到模板中。区别就在于HTML的层级,使用data指定的时候,每一份数据渲染到对应的容器中;使用foreach的时候所有数据都被绑定到了一个容器内。上一篇中也介绍了foreach的用法,用不用模板都能得到一样的效果。回忆一下foreach的写法:
<div data-bind="foreach: people">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</div>
- as 在嵌套绑定中的使用
<ul data-bind="template: { name: 'seasonTemplate', foreach: seasons, as: 'season' }"></ul> <script type="text/html" id="seasonTemplate">
<li>
<strong data-bind="text: name"></strong>
<ul data-bind="template: { name: 'monthTemplate', foreach: months, as: 'month' }"></ul>
</li>
</script> <script type="text/html" id="monthTemplate">
<li>
<span data-bind="text: month"></span>
is in
<span data-bind="text: season.name"></span>
</li>
</script> <script>
var viewModel = {
seasons: ko.observableArray([
{ name: 'Spring', months: [ 'March', 'April', 'May' ] },
{ name: 'Summer', months: [ 'June', 'July', 'August' ] },
{ name: 'Autumn', months: [ 'September', 'October', 'November' ] },
{ name: 'Winter', months: [ 'December', 'January', 'February' ] }
])
};
ko.applyBindings(viewModel);
</script>
上面这种多层的绑定中,要在下级绑定层次中要引用上层的话,就可以使用 as 定义的别名了。当然层次简单的时候,用$parent也是可以的,用 as 会更加清晰,不会纠结在层次关系中。
注意:as 后接的别名应该用引号引起来,因为这里我们是命名一个变量,而不是读取一个已经存在的变量。
- 动态决定使用哪个模板
<ul data-bind='template: { name: displayMode, foreach: employees }'> </ul>
<script id="active" type='text/html'>
<li><span data-bind='text: name'></span>uses the "active" template!</li>
</script>
<script id="inactive" type='text/html'>
<li><span data-bind='text: name'></span>uses the "inactive" template!</li>
</script> <script>
var viewModel = {
employees: ko.observableArray([{
name: "Kari",
active: ko.observable(true)
}, {
name: "Brynn",
active: ko.observable(false)
}, {
name: "Nora",
active: ko.observable(false)
}]),
displayMode: function(employee) {
// Initially "Kari" uses the "active" template, while the others use "inactive"
return employee.active() ? "active" : "inactive";
}
};
// ... then later ...
viewModel.employees()[1].active(true);
// Now "Brynn" is also rendered using the "active" template.
ko.applyBindings(viewModel);
</script>
上面这个例子有 active 和 inactive 两个模板,ul 元素的 name 没有直接指定模板 id ,而是通过一个函数返回模板 id,达到了选择不同模板的目的。
吐槽一下:官方的文档相当省,模板脚本都省掉了。。。博客园的汤姆大叔,居然也就那样搬下来了,纯翻译的让人无语。
Mapping插件
模板技术可以简单地将数据和表现分离,采用前端渲染技术时,后台只要将模型数据发给客户端即可,前端将获取到的数据渲染输出。目前为止都是手动将获取到的数据写入 ViewModel 中,而 Mapping 插件就是帮你自动完成创建 ViewModel 的好工具。对比一下手动创建和使用 Mapping 插件两种方式:
手动创建:
// setup
var viewModel = {
serverTime: ko.observable(),
numUsers: ko.observable()
}
// update:
var data = getDataUsingAjax(); // your method to get data from server
viewModel.serverTime(data.serverTime);
viewModel.numUsers(data.numUsers);
Mapping插件
var data = getDataUsingAjax(); // your method to get data from server
var viewModel = ko.mapping.fromJS(data);
ko.mapping.fromJS(data, viewModel);
假如从服务器中获取的数据比较多的话,使用Mapping的确可以减少很多代码量。使用Mapping之后,data对象的所有属性都被设置成可观察对象,所有数组都被设置成可观察对象数组,数组中的顺序依然被保存。改变data对象的属性或者增减数组项目就可以引起绑定更新事件。Mapping插件还有很多高级用法,不过除非非Mapping插件不可的情况,没必要对一个插件投入太多精力去学习,搞太多还不如手写算了。
总结
本篇主要简单介绍了knockoutjs中模板技术的使用,感觉 ko 中用到的技术应该也差不多就这些了,自定义绑定和组件绑定相关的内容暂时没有用到就不去深究了。组件的写法有很多种,不一定要用 ko 的组件封装规则,各有所好。 下一篇将会用一个综合实例来介绍 ko 的各种绑定用法,敬请期待~~
码字不易,随手点赞哈~~~
参考资料:
- 官方教程: http://knockoutjs.com/documentation/introduction.html
- 汤姆大叔教程(官方教程翻译,版本太旧,信息缺失明显): http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
- 一个对前端模板技术的全面总结: http://www.tuicool.com/articles/qMJ77r
文字较多,惯例凑图!
(图片来源:网络)
原创文章,转载请注明出处!本文链接:http://www.cnblogs.com/qieguo/p/5579888.html
【Knockout.js 学习体验之旅】(3)模板绑定的更多相关文章
- 【Knockout.js 学习体验之旅】(2)花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- Knockout.js初体验
前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...
- Knockout.Js学习目录
1.Knockout.Js(简介) 2.Knockout.Js(监控属性Observables) 3.Knockout.Js(属性绑定) 4.Knockout.Js(事件绑定) 5.Knockout. ...
- 关于 knockout js 学习中的疑问 (1)
最近刚刚学习knockout中遇到如下问题: 1.在给viewModel定义一个方法时,有时后面跟 的this,有的时候没有 如下所示: this.fullName = ko.computed(fun ...
- Node.js学习(2)-使用模板引擎art-template
node 安装cnpm i -S art-template 加载require('art-template') template.render接收的是字符串
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue.js学习笔记--3.表单输入绑定
整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...
- Knockout学习之模板绑定器
模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...
随机推荐
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- Entity Framework教程(第二版)
源起 很多年前刚毕业那阵写过一篇关于Entity Framework的文章,没发首页却得到100+的推荐.可能是当时Entity Framework刚刚发布介绍EF的文章比较少.一晃这么多年过去了,E ...
- java Web项目创建之一(普通java web项目的创建与发布)
1.创建新的web项目 file->new_>Dynamic Web Project(如图) 或file->new->Project->Web->Dynamic W ...
- 【翻译】MongoDB指南/CRUD操作(二)
[原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(二) 主要内容: 更新文档,删除文档,批量写操作,SQL与MongoDB映射图,读隔离(读关 ...
- 数据库备份并分离日志表(按月)sh 脚本
#!/bin/sh year=`date +%Y` month=`date +%m` day=`date +%d` hour=`date +%H` dir="/data/dbbackup/f ...
- [Django]用户权限学习系列之设计自有权限管理系统设计思路
若在阅读本片文章遇到权限操作问题,请查看本系列的前两章! http://www.cnblogs.com/CQ-LQJ/p/5609690.html和http://www.cnblogs.com/CQ- ...
- 【一起学OpenFoam】02 软件准备
"工欲善其事必先利其器",在利用OpenFoam解决我们的工程问题之前,首先要做的事情是搭建一个OpenFoam运行环境.很遗憾的是,OpenFoam的原生开发系统是Linux,因 ...
- Android快乐贪吃蛇游戏实战项目开发教程-03虚拟方向键(二)绘制一个三角形
该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.绘制三角形 在上一篇文章中,我们已经新建了虚拟方向键的自定义控件Direct ...
- 端盘子的服务生到月薪一万五的IT精英,你能相信吗
一直以来,我都觉得自己不是一个有故事的人. 以前的我,是个乖宝宝,对父母言听计从,特别内向,甚至一度感觉到自卑.不上学之后,我干过送货员,去工地除泥搬砖,当过油漆工,去过工厂,还去饭店当过端盘子的服务 ...
- 【每日一linux命令2】命令执行顺序:
二.命令顺序: 若在 shell 内置的命令/bin 以及/usr/bin 之下都出现了命令 pwd,那当我们执行该命令时,会执行哪 一个?答案是第一优先执行 shell 内置的命令,再执行路 ...