回退视图

概述

回退视图,并非是视图的某一种类型,而是指在不可直接访问的视图上指定的,页面刷新后将要显示的视图,亦即,需要回退显示的视图。
回退视图通常需要设置为逻辑距离上比较近的视图。例如:
视图的回退显示
在上图中,“个人中心子页面” 是不可直接访问的,但由于设定了其回退视图为 “个人中心”,所有页面刷新后展现的,是个人中心界面。
如果没有设置回退视图,那么页面将在刷新后呈现默认视图。

设置回退视图

开发者可以使用属性: data-view-fallback 指定回退视图。例如:
main.html
1
<!-- 设置回退视图为 default 命名空间下ID为 profile 的视图 -->
2
<section data-view-id = "profile-sub-page"
3
data-view-title = "个人中心子页面"
4
data-view-directly-accessible = "false"
5
6
data-view-fallback = "profile"
7
></section>
Copied!
如果回退视图的命名空间不是默认的 default,开发者可以通过声明 data-view-fallback-namespace 属性指定回退视图的命名空间。例如:
main.html
1
<!-- 设定回退视图为 myNamespace 命名空间下ID为 profile 的视图 -->
2
<section data-view-id = "profile-sub-page"
3
data-view-title = "个人中心子页面"
4
data-view-directly-accessible = "false"
5
6
data-view-fallback = "profile"
7
data-view-fallback-namespace = "myNamespace"
8
></section>
Copied!
data-view-fallback 不仅可以用来指定确切的视图ID,也可以设定为 :default-view 伪视图。
开发者通常不需要这样做,因为不声明回退视图,就能实现 “页面刷新后呈现默认视图” 的效果。
除 DOM 指令外,View.js 也允许开发者通过 API 动态设置回退视图。例如:
init.js
1
var view = View.ofId("myView");
2
3
/**
4
* 设置 myView 的回退视图为 default 命名空间下ID为 profile
5
* 的视图
6
*/
7
view.setFallbackViewId("profile");
8
9
/**
10
* 设置 myView 的回退视图为 myNamespace 命名空间下ID为 profile
11
* 的视图
12
*/
13
view.setFallbackViewId("profile", "myNamespace");
Copied!
无论是通过 API 动态设置,还是借助 DOM 指令静态设置,View.js 并不要求设置的回退视图必须可以直接访问。
如果设置的回退视图不能直接访问,View.js 将逐级回退,直到找到最近的,可以直接访问的视图。如果回退链路上的所有视图都不能直接访问,View.js 将回退显示默认视图。
开发者可以通过 API:view.getFallbackView() 得知回退显示的最终视图。例如:
init.js
1
var subPageView = View.ofId("subPage"),
2
subPageCenterView = View.ofId("subPageCenter");
3
4
/**
5
* 视图:subPageCenter 不可直接访问
6
*/
7
subPageView.setFallbackViewId("subPageCenter");
8
9
/**
10
* 视图:profile 可以直接访问
11
*/
12
subPageCenterView.setFallbackViewId("profile");
13
14
var fbView = subPageView.getFallbackView();
15
console.log(fbView.id); // -> profile
Copied!
Last modified 2yr ago
Copy link