事件驱动(二)

实例事件:enter - 视图进入

enter 事件在指定的视图被切换为活动状态,亦即成为活动视图时触发。 开发者可以监听该事件完成数据在该视图上的请求和展现。例如:
1
var view = View.ofId("goods-detail");
2
view.on("enter", function(e){
3
// 根据参数查询并呈现商品详情
4
});
Copied!
enter 事件在视图每次进入时都会被触发。

实例事件:ready - 视图就绪

ready 事件在视图第一次进入,enter 事件触发之前触发。 通过监听该事件,开发者可以为视图添加一次性执行的业务逻辑,如数据初始化等。例如:
1
var view = View.ofId("bind-bankCard")
2
view.on("ready", function(e){
3
/**
4
* 请求并缓存绑定银行卡时可选的银行列表,
5
* 后续使用缓存的银行列表,减少与服务器的通讯
6
*/
7
view.context.set("supportedBankList", bankList);
8
});
Copied!
需要注意的是,ready 事件仅会在视图第一次进入时触发一次。

实例事件:leave - 视图离开

leave 事件在活动视图已完成切换,新活动视图的 readyenter 事件触发之前触发。 开发者可借助该事件重置视图,如清空输入框等。例如:
1
var view = View.ofId("bind-bankCard");
2
3
/**
4
* 重置视图
5
*/
6
var resetView = function(){
7
//xxx.value = "";
8
//xxx.disabled = false;
9
//...
10
};
11
12
view.on("leave", function(e){
13
resetView();
14
});
Copied!
leave 事件触发后,新的活动视图的 beforeenter 事件才会被触发。

实例事件:beforeenter、afterenter

beforeenterready 之后,enter 之前触发;afterenterenter 之后触发。

宏观事件:beforechange

beforechange 事件在活动视图发生变化之前触发,用于告知开发者活动视图即将发生切换。 宏观事件不在实例上监听,需要在对象 window.View 上监听。例如:
1
View.on("beforechange", function(e){
2
console.log(e.sourceView.id + "-->" + e.targetView.id);
3
});
Copied!
该事件在当前活动视图的 leave 事件之前触发。

宏观事件:change

beforechange 事件相似,change 事件同样可以用于告知开发者活动视图的切换。不同的是,change 事件在新活动视图的 beforeenter 事件之后,ready 事件之前触发。

宏观事件:afterchange

afterchange 在活动视图切换完成,亦即新活动视图的 afterenter 事件之后触发。
概括来讲,事件及关键动作的触发顺序为:
  1. 1.
    View.beforechange
  2. 2.
    view.leave
  3. 3.
    view.beforeenter
  4. 4.
    活动视图切换,新活动视图重新布局
  5. 5.
    View.change
  6. 6.
    view.ready
  7. 7.
    view.enter
  8. 8.
    view.afterenter
  9. 9.
    View.afterchange
开发者可根据业务需要和流程设计,选择恰当的事件执行特定的动作,从而以流水线的方式完成视图的功能开发。
Last modified 1yr ago