视图参数 - View.js

Search…
视图参数
View.js 支持视图参数和视图选项两种数据传递媒介。本文将介绍第一种传递媒介：视图参数。
概述
视图参数，是借助内存传导的，用于在视图之间交换数据，实现跨页面协作的数据传递媒介。
开发者只能在 视图跳转 时指定视图参数。支持指定视图参数的视图跳转 API 包括：
1.View.navTo() 
2.View.changeTo()
3.View.back()
4.View.forward()
视图参数只能使用 js 传导，不能使用 html 指令传导。
参数赋值
视图参数在跳转指令中使用预留关键字：params 指定，例如：
action.js
1
/**
2
 * 以“压入堆栈”的方式跳转至 default 命名空间下, ID为 targetVieWId 的视图
3
 *
4
 * 第一个参数指定了跳转目标；
5
 * 第二个参数指定了跳转控制选项，其中，关键字：'params' 用于指定视图参数集合。
6
 */
7
View.navTo("targetViewId", {
8
​
9
    /**
10
     * 开发者可以在视图参数集合指定任意数量的参数，参数取值可以是
11
     * 任意合法的js类型
12
     */
13
    params: {
14
        paramName1: "boo",/* 传导字符串 */
15
        paramName2: true,/* 传导枚举值 */
16
        paramName3: ['str', 123, false, new Object()],/* 传导数组 */
17
        paramName4: View.find(".container"),/* 传导DOM元素 */
18
        paramName5: function(data){doSth(data);}/* 传导回调方法 */
19
    }
20
});
Copied!
视图参数只能以集合的形式批量设置，不能按参数名分别设置。
参数检索
View.js 提供了如下 API 以供开发者检索视图参数：
1.view.hasParameter(name: string): boolean
用于判断视图参数中是否含有指定名称的参数
2.view.getParameter(name?: string): null|any
获取视图参数中指定名称的参数取值。如果没有指定参数名，则返回整个参数集合。
例如：
init.js
1
var view = View.ofId("targetViewId");
2
​
3
/**
4
 * 视图进入时检索参数
5
 */
6
view.on("enter", function(){
7
    var param1 = view.getParameter("paramName1"); // -> "boo"
8
    var param2 = view.getParameter("paramName2"); // -> true
9
    var param3 = view.getParameter("paramName3"); // -> ['str', 123, false, {}]
10
    var param4 = view.getParameter("paramName4"); // -> HTMLDivElement
11
    var param5 = view.getParameter("paramName5"); // -> function(){...}
12
    
13
    var params = view.getParameter();/* 获取整个参数集合 */
14
    console.log(params["paramName1"] === param1); // -> true
15
    console.log(params["paramName2"] === param2); // -> true
16
    console.log(params["paramName3"] === param3); // -> true
17
    console.log(params["paramName4"] === param4); // -> true
18
    console.log(params["paramName5"] === param5); // -> true
19
});
Copied!
需要注意的是，视图离开后，getParameter() 方法仍然可以获取到最后一次传入的参数。但重新进入视图时，再次调用将获取到新传入的参数。
如果再次进入时，程序不便于提供参数，此时开发者将得到 null 。对此，开发者可以手动将其存放至 视图上下文 中，然后从上下文中检索。例如：
init.js
1
var view = View.ofId("targetViewId");
2
​
3
/**
4
 * 监听事件：“视图进入”，并在参数非空时，更新视图上下文
5
 */
6
view.on("enter", function(){
7
    var params = view.getParameter();
8
    if(null != params)
9
        /**
10
         * View 的每个实例都有其自己专用的数据存取上下文，
11
         * 开发者可以使用 viewInstance.context 取得该
12
         * 上下文
13
         */
14
        view.context.set("params", params);
15
    }
16
});
17
​
18
/**
19
 * 在视图离开后检索参数
20
 */
21
view.on("leave", function(){
22
    var params = view.getParameter();
23
    console.log(params); // -> null
24
    
25
    params = view.context.get("params");
26
    console.log(params.paramName1); // -> "boo"
27
});
Copied!
由于上述场景是开发者经常遇到的，为简化开发工作，View.js 自 v1.6.3 版本开始默认支持有效视图参数的自动保存（至上下文），结合 view.seekParameter() 方法，开发者无需再手动存取。
参阅方法：
1. view.setIfAutoSaveParamsToContext()
2. view.seekParameter()
参数名区分大小写
回调方法
开发者可以借助视图参数传递任意类型的参数，包括 Funtion，以实现更灵活的页面协作，例如：“选择收货地址”。
实现思路为：
1.用户在 “确认订单” 页面点击 “收货人” 时，界面跳转至 “收货地址列表”，并传递回调方法：“用户点选特定收货地址时要执行的方法”，方法内部实现用户选择的收货地址的渲染等
2.“收货地址列表” 界面监听用户对 “收货地址” DOM 元素的点击事件，并在点击时执行收到的回调方法，并将DOM元素关联的收货地址信息传递进去
代码如下：
确认订单页面
收货地址列表界面
1
var view = View.ofId("confirm-order");
2
​
3
/**
4
 * view.find() 方法等同于 view.getDomElement().querySelector()，
5
 * 用于查找视图的DOM骨架中，符合给定选择器的DOM元素
6
 */
7
var consigneeObj = view.find(".consignee"),
8
    consigneeNameObj = view.find(".consignee-name"),
9
    consigneePhoneObj = view.find(".consignee-phone"),
10
    consigneeAddressObj = view.find(".consignee-address");
11
​
12
/**
13
 * 点击 收货人 DOM元素时，跳转至收货地址列表界面
14
 */
15
Hammer(consigneeObj).on("tap", function(){/* Hammer.js 是一款优秀的第三方框架，用于处理触摸事件 */
16
    View.navTo("consignee-list", {
17
        params: {
18
            /**
19
            * 指定参数：“用户点选特定收货地址时要执行的方法”
20
            * 
21
            * 注：
22
            * 1. 参数名：'selectCallback' 由 确认订单 页面
23
            *    与 收货地址列表 界面共同约定
24
            * 
25
            * 2. 回调方法的参数：consignee 同样由两个页面共同
26
            *    约定，用于代表用户选择的收货地址信息
27
            */
28
            selectCallback: function(consignee){
29
                /* 将用户选择的收货地址信息更新至 确认订单 界面中 */
30
                consigneeNameObj.innerHTML = consignee.name;
31
                consigneePhoneObj.innerHTML = consignee.phone;
32
                consigneeAddressObj.innerHTML = consignee.address;
33
            }
34
        }
35
    });
36
});
Copied!
1
var view = View.ofId("consignee-list");
2
​
3
/** 收货地址列表 */
4
var consigneeListObj = view.find(".list");
5
​
6
/**
7
 * 在整个列表上创建监听，而非每个地址上分别创建，以减少监听器的个数
8
 */
9
Hammer(consigneeListObj).on("tap", function(e){
10
   var target = e.srcEvent.target;
11
​
12
   /* 如果点击的不是 收货地址上的“选择”按钮，则什么也不做 */
13
   if(!target.classList.contains("select"))
14
      return;
15
​
16
   /**
17
    * "data" 属性不是浏览器自带的，而是在构建收货地址的 DOM 元素时，
18
    * 由程序主动附加在“选择”按钮上的，用于关联对应收货地址信息的key
19
    */
20
   var consigneeData = target.data;
21
​
22
   /* 执行收到的回调方法 */
23
   var selectCallback = view.getParameter("selectCallback");
24
   if(typeof selectCallback === "function"){
25
      View.back();/* 返回到“确认订单”页面 */
26
      selectCallback(consigneeData);
27
   }
28
});
Copied!
伪视图
视图选项
Last modified 1yr ago
Copy link
Contents