# 视图容器
## 概述
视图容器，即为存放所有视图骨架的 DOM 容器。除非明确指定，否则 View\.js 默认将 `document.body` 视为视图容器。
视图容器的作用，主要是为了限定视图的渲染范围、视觉位置，统一约束视图的外围轮廓等。通过调整视图容器的尺寸和位置，开发者可以实现不同的表现效果：
开发者可以借助浏览器的开发者工具，通过识别 `data-view-container` 属性确定当前的视图容器，例如：
也可以使用API得知：
## 状态表达
除了集中包裹视图之外，视图容器还承载着 “表达 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 结点上单独声明，以设定该视图的单独表现情况。例如：
{% tabs %}
{% tab title="main.html" %}
```markup
```
{% endtab %}
{% endtabs %}
其中，`view1` 不能直接访问（响应自身配置），`view2` 可以直接访问（响应自身配置），`view3` 可以直接访问（响应全局配置）。
没有在视图容器上声明 `data-view-directly-accessible` 属性时，View\.js 默认将所有视图设定为“不能直接访问”。
### 渲染宽高比
视图容器支持 `data-view-whr` 属性，以允许开发者设定视图在 PC 的桌面环境浏览时，视图容器渲染尺寸的宽高比。
当用户在移动端浏览网页时，这一属性并无作用。但当浏览环境是 PC 这一 “宽度大于高度” 的情况时，View\.js 将调整视图容器的渲染效果，使其 “高度撑满，宽度按比例动态计算，水平居中”，如下所示：
View\.js 默认将其设定为 "320/568"，即为 iPhone5 的宽高比。开发者可以按需在视图容器上调整属性值：
```markup
...
```
其效果效果如下所示：
