十七、HTML5单页框架View.js介绍 - 视图参数

不需要 Npm 的单页应用框架:

View.js - http://view-js.com


正如前文所说,视图是View.js的核心概念,也是实现业务的核心载体。如果业务相对简单,每个视图都各自为营,彼此互相独立,那么问题不大,开发工作会相当轻松。但真实的世界里,终端往往是需要多个页面进行互相交互、彼此传递数据,共享信息的。比如这样的场景:

网购确认订单界面,需要与收货地址列表界面交互,使得用户在收货地址列表界面触摸特定收货地址后,界面自动切回确认订单界面,并把选定的收货地址信息呈现到界面上

View.js能够实现吗?当然能。这是View.js的实现效果:


那么视图之间是如何协作呢?又是如何以一种清晰明了的规则保持视图之间较低的耦合关系的呢?借助视图参数。
视图参数,是指视图切换(亦即,活动视图发生变化)时,原视图(要离开的视图)向目标视图(要进入的视图)传递的参数。

作为视图交互的媒介和桥梁,视图参数支持所有类型,如:方法、数组、对象,以及DOM元素等,使得开发者不再受限于地址栏,突破地址栏只能传递类型简单,尺寸较小数据的限制,例如:

View.navTo("detail", {params: {id: "001", count: 2, callback: function(){}});
View.back({params: {showHeader: true}});

其中,对象:{params: xxx}是视图切换选项,使用关键字:params 指定视图参数这一选项。(除视图参数外,视图切换还有其它控制选项,后面的章节会有介绍。)

View.js为所有视图切换API均加上了参数传递支持,包括:

  1. View.navTo()
  2. View.changeTo()
  3. View.back()
  4. View.forward()

目标视图则可以使用API:view.hasParameter()view.getParameter()等方法检索相关参数,如:

var view = View.ofId("detail");
view.hasParameter("id");// -> true
view.getParameter("count");// -> 2
view.seekParameter("callback");// -> function(){}

有了视图参数这一工具,对于文章开头提出的问题,我们就可以使用如下伪代码实现:

/* 确认订单视图 */
View.navTo("recipient-list", {params: {
	selectCallback: function(recipient){
		//呈现收货人信息:recipient
	}
}});

/* 收货地址视图 */
Hammer(recipientListObj).on("tap", function(e){
	var recipentItemObj = getItemObj(e.srcEvent.target);	// 根据触摸位置获取对应的收货地址DOM
	var recipient = recipentItemObj .data;// 前文中附加data至dom中
	
	view.getParameter("selectCallback")(recipient);// 调用指定的“选择回调”
});

需要注意的是,视图参数区分大小写,且在离开后均会被清空,并不会保留。如果开发者需要持久化使用相关参数,则可以将其手动放至上下文中。


[第一篇]
[上一篇 - 视图上下文] [下一篇 - 视图选项]

你可能感兴趣的:(HTML5,单页应用/框架,-,View.js)