默认视图

概述

默认视图,即为没有指定要访问的视图信息时,页面加载完成后,第一个展现给用户的视图。
除非明确指定,否则 View.js 将使用视图容器的 DOM 树中,自上而下 顺序的第一个视图为默认视图。

声明默认视图

开发者可以使用 data-view-default 属性静态指定默认视图,如下所示:
main.html
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<link rel = "stylesheet" href = "js/plugin/view/view.min.css"/>
5
6
<link rel = "stylesheet" href = "css/main/view1.css"/>
7
<link rel = "stylesheet" href = "css/main/view2.css"/>
8
</head>
9
<body>
10
<section data-view-id = "view1">
11
...
12
</section>
13
14
<section
15
data-view-id = "view2"
16
data-view-default = "true">
17
...
18
</section>
19
20
<script type = "text/javascript" src = "js/plugin/view/view.min.js"></script>
21
</body>
22
</html>
Copied!
虽然视图 view1 先于 view2 存在,但由于明确指定了视图 view2 为默认视图,所以页面打开后,View.js 将自动展现 view2。
如果有多个视图被声明为默认视图,则 View.js 将依据 DOM 自上而下 的顺序,使用声明的第一个默认视图。
除了静态指定,开发者也可以在 View.js 就绪前通过脚本动态指定,如下所示:
init.js
1
/**
2
* View.beforeInit() 方法,用于添加预处理器,
3
* 这些预处理器在 View.js 初始化前同步执行。
4
*/
5
View.beforeInit(function(){
6
View.setAsDefault("home-page");
7
8
var defaultViewId = View.getDefaultView().id;
9
console.log(defaultViewId );// --> 'home-page'
10
});
Copied!
Last modified 2yr ago
Copy link