视图容器
视图容器,即为存放所有视图骨架的 DOM 容器。除非明确指定,否则 View.js 默认将
document.body
视为视图容器。视图容器的作用,主要是为了限定视图的渲染范围、视觉位置,统一约束视图的外围轮廓等。通过调整视图容器的尺寸和位置,开发者可以实现不同的表现效果:

在视图容器内使用 padding 预留 footer 的位置

定义视图容器的尺寸
开发者可以借助浏览器的开发者工具,通过识别
data-view-container
属性确定当前的视图容器,例如:
识别视图容器1
也可以使用API得知:

识别视图容器2
除了集中包裹视图之外,视图容器还承载着 “表达 View.js 的初始化状态,以及当前活动视图” 的责任。这些信息的表达,通过在其 DOM 上附加相关属性完成,例如:

表达的信息在视图切换时的改变
其中
data-view-state=ready
表示 “View.js 已准备就绪”,data-active-view-id
代表当前活动视图的 ID,data-active-view-namespace
代表当前活动视图的命名 空间。开发者可以借助视图容器设定视图默认是否可以直接访问。
视图是否“可以直接访问”,是指视图在传播打开或刷新时,是否在页面装载完毕后第一个呈现给用户。
如果页面装载完毕后,用户看到的第一个视图不是被传播访问或刷新的视图,我们就说视图是“不能直接访问的”;反之,视图就是“可以直接访问的”。
开发者可以在视图容器的 DOM 结点上声明属性
data-view-directly-accessible=true|false
以设定“所有视图是否可以直接访问”,也可以在特定视图的骨架 DOM 结点上单独声明,以设定该视图的单独表现情况。例如:main.html
<body>
<!-- 设定所有视图默认可以直接访问 -->
<div
data-view-container
data-view-directly-accessible = "true">
<!-- 设置视图不能直接访问 -->
<section
data-view-id = "view1"
data-view-directly-accessible = "false">
</section>
<!-- 设置视图可以直接访问 -->
<section
data-view-id = "view2"
data-view-directly-accessible = "true">
</section>
<!-- 继承默认配置 -->
<section data-view-id = "view3"></section>
</div>
</body>
其中,
view1
不能直接访问(响应自身配置),view2
可以直接访问(响应自身配置),view3
可以直接访问(响应全局配置)。没有在视图容器上声明
data-view-directly-accessible
属性时,View.js 默认将所有视图设定为“不能直接访问”。视图容器支持
data-view-whr
属性,以允许开发者设定视图在 PC 的桌面环境浏览时,视图容器渲染尺寸的宽高比。当用户在移动端浏览网页时,这一属性并无作用。但当浏览环境是 PC 这一 “宽度大于高度” 的情况时,View.js 将调整视图容器的渲染效果,使其 “高度撑满,宽度按比例动态计算,水平居中”,如下所示:

320/568
View.js 默认将其设定为 "320/568",即为 iPhone5 的宽高比。开发者可以按需在视图容器上调整属性值:
<div data-view-container data-view-whr = "375/568">
...
</div>
其效果效果如下所示:

375/568
Last modified 3yr ago