【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可以条件 ...
随机推荐
- Java多线程基础学习(一)
1. 创建线程 1.1 通过构造函数:public Thread(Runnable target, String name){} 或:public Thread(Runnable target ...
- Key/Value之王Memcached初探:二、Memcached在.Net中的基本操作
一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...
- MSDN文档篇
很多人网上下载3~10G不等的MSDN文档,发现,下载完成了不会用 很多人每次都得在线下载文档,手上万千PC,都重新下载不是得疯了? so==> 先看几张图 推荐一个工具:https://vsh ...
- ExtJS 4.2 介绍
本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...
- CoreCRM 开发实录——Travis-CI 实现 .NET Core 程度在 macOS 上的构建和测试 [无水干货]
上一篇文章我提到:为了使用"国货",我把 Linux 上的构建和测试委托给了 DaoCloud,而 Travis-CI 不能放着不用啊.还好,这货支持 macOS 系统.所以就把 ...
- 前端学HTTP之内容协商
前面的话 一个URL常常需要代表若干不同的资源.例如那种需要以多种语言提供其内容的网站站点.如果某个站点有说法语的和说英语的两种用户,它可能想用这两种语言提供网站站点信息.理想情况下,服务器应当向英语 ...
- Node.js:path、url、querystring模块
Path模块 该模块提供了对文件或目录路径处理的方法,使用require('path')引用. 1.获取文件路径最后部分basename 使用basename(path[,ext])方法来获取路径的最 ...
- 编写高质量代码:改善Java程序的151个建议(第6章:枚举和注解___建议88~92)
建议88:用枚举实现工厂方法模式更简洁 工厂方法模式(Factory Method Pattern)是" 创建对象的接口,让子类决定实例化哪一个类,并使一个类的实例化延迟到其它子类" ...
- 内存映射文件MemoryMappedFile使用
参考资料: http://blog.csdn.net/bitfan/article/details/4438458 所谓内存映射文件,其实就是在内存中开辟出一块存放数据的专用区域,这区域往往与硬盘上特 ...
- iOS 后台处理
iOS 后台处理的常见用途 1.进入后台时候删除资源:应用处于挂起状态的时候所占用的资源越少,该应用被iOS终止的风险就越低.通过从内存中清理那些易于重新创建的资源,可以增加应用驻留内存的机会,因此可 ...