视图选项
视图选项,是 View.js 支持的第二种数据传导方式。
与视图参数不同的是,视图选项的传导媒介,是地址栏。其地址栏表现形态如下所示:
http://domain:port/context/path/to/html#[email protected]!option1=value1&option2=value2...
其中,
option1
和 option2
即为视图选项。开发者同样只能在 视图跳转 时指定视图选项。但支持指定视图选项的视图跳转 API 只包括:
- 1.
View.navTo()
- 2.
View.changeTo()
视图选项的赋值,同时支持使用 js 传导来进行 和 使用 html 传导来进行。
对于 js 传导,使用预留关键字:
options
在跳转指令中指定,例如:action.js
/**
* 以“替换栈顶”的方式跳转至 mall 命名空间下, ID为 goods-detail 的视图。
*
* 第一个和第二个参数指定了跳转目标;
* 第三个参数指定了跳转控制选项,其中,关键字:'options' 用于指定视图选项集合。
*/
View.changeTo("goods-detail", "mall", {
/**
* 视图选项只支持字符串类型
*/
options: {
paramName1: "boo"
paramName2: "bar"
}
});
对于 html 传导,在
data-view-rel
指令中,使用 !
符号追加至跳转目标后即可,例如:main.html
<!-- 跳转目标是 视图ID -->
<span data-view-rel = "goods-detail!id=ID666" data-view-rel-namespace = "mall">商品详情</span>
<!-- 跳转目标是 视图群组(~ 符号用于告诉 View.js 字符串:"detail" 是 视图群组名称,而非 视图ID) -->
<span data-view-rel = "~detail!id=ID666" data-view-rel-namespace = "mall">商品详情</span>
由于视图选项的传导媒介是地址栏,而地址栏只能表达出当前活动视图的信息,所以开发者只能获取到当前活动视图所关联的视图选项。
用于获取当前活动视图的视图选项的API为:
- 1.
View.hasActiveViewOption(name: string): boolean
判断视图选项中是否含有特定名称的参数 - 2.
View.getActiveViewOption(name: string): null|string
获取视图选项中特定名称的参数 - 3.
View.getActiveViewOptions(): null|Object<string, string>
获取视图选项描述的参数集合
例如:
init.js
var view = View.ofId("goods-detial", "mall");
view.on("enter", function(){
var param1 = View.getActiveViewOption("paramName1"); // -> "boo"
var param2 = View.getActiveViewOption("paramName2"); // -> "bar"
var id = View.getActiveViewOption("id"); // -> "ID666"
var options = View.getActiveViewOptions();
console.log(options["paramName1"] === param1); // -> true
console.log(options["paramName2"] === param1); // -> true
console.log(options["id"] === param1); // -> true
});
参数名区分大小写
部分情况下,开发者需要响应用户的操作,更新地址栏中的视图选项。对此,View.js 提供了API:
View.setActiveViewOption(name: string, value: string)
来应对。例如:main.js
var count = view.getActiveViewOption("count") || 1;
/**
* 增加购买数量
*/
Hammer(plusObj).on("tap", function(){
View.setActiveViewOption("count", String(++count));
});
由于视图选项是通过地址栏传导的,并且只能检索当前活动视图关联的视图选项,所以视图选项在如下几个方面与视图参数有所不同:
- 1.参数个数受浏览器地址栏长度限制
- 2.参数类型只能是
string
类型 - 3.参数在页面刷新后仍然可以检索到
- 4.参数在浏览器前进或后退时自动恢复
为简化开发者的参数检索工作,View.js 提供了一个更智能的参数检索API:
View.seekParameter(name: string)
。该方法如下方式工作:
- 1.尝试从 视图参数 中检索同名参数,有则返回,没有则执行步骤2;
- 2.尝试从 视图选项 中检索同名参数,有则返回,没有则执行步骤3;
- 3.尝试从 queryString 中 检索同名参数,有则返回对应的取值,没有则返回
null
。
例如:
action.js
init.js
/**
* 从 商品详情 页面跳转至 确认订单 界面
*
* 跳转前,页面的URL为:http://domain/main.html?id=G01#goods-detail
*/
View.navTo("confirm-order", {
params: {
inventory: 100 /* 库存量:100 */
},
options: {
count: 1 /* 购买个数:1 */
}
});
var view = View.ofId("confirm-order");
/**
* 跳转后,页面的URL为 http://domain/main.html?id=G01#confirm-order!count=1
*/
view.on("enter", function(){
console.log(view.seekParameter("id")); // -> "G01"
console.log(view.seekParameter("inventory")); // -> 100
console.log(view.seekParameter("count")); // -> "1"
});
Last modified 3yr ago