search

视图

hashtag
概述

视图，是 View.js 驱动的单页应用的单元载体，用于定义用户视觉上看到的一屏内容。

视觉上一个界面向另一个界面的切换，在技术上是同一 HTML 页面中，可见区域从一个 DIV 区块向另一个 DIV 区块的切换。这些动态被切换显示的 DIV 区块就是视图。

hashtag
创建视图

作为页面的功能单元，每个视图都是唯一的，都有唯一的ID及命名空间以将其与其它视图区分开来。

通过为特定的 DIV 区块添加属性：data-view-id 来定义视图的ID，开发者即可完成视图的创建：

<!DOCTYPE HTML>
<html>
<head>
    <link rel = "stylesheet" href = "js/plugin/view/view.min.css"/>
    <link rel = "stylesheet" href = "css/main/view1.css"/>
</head>
<body>
    <!-- 定义 default 命名空间下，ID为 view1 的视图 -->
    <section data-view-id = "view1">
        <header>个人资料</header>
        <div class = "body">
            <div class = "item name">
                <label>姓名：</label><input/>
            </div>
            <div class = "item address">
                <label>住址：</label><input/>
            </div>

            <div class = "btn">提交</div>
        </div>
    </section>
    
    <!-- 定义 my-namespace 命名空间下，ID为 view2 的视图-->
    <section
        data-view-id = "view2"
        data-view-namespace = "my-namespace">
        ...
    </section>

    <script type = "text/javascript" src = "js/plugin/view/view.min.js"></script>
</body>
</html>

上述代码展示了两个视图的创建。其中，ID 为 view1 和 view2 的两个 DOM 元素，分别是两个视图的内容骨架，他们共同定义了应用的视觉效果和使用体验。

当区块 view1 处于活动状态时，用户看到的是视图 view1 的表现效果；当活动视图（处于活动状态的视图）切换至 view2 时，用户看到的是视图 view2 的表现效果。

circle-info

检验视图创建是否成功，可以通过执行API：View.ifExists(viewId: {String}) - 判断视图是否存在 得知。

hashtag
赋能视图

视图在创建完成后，只具备了静态展现的能力，开发者需要手动开发脚本，实现视图内的数据展现和操作交互等，例如：

circle-info

View.js 能够很友好地与其它 非路由类 框架并存，例如：jQuery, knockout, vue 等，开发者可以一如既往地按照传统开发方式使用这些框架。

hashtag
访问视图

开发者可以通过访问 html 页面，并使用 # 符号指定视图信息来访问视图。

例如，URL：

http://view-js.com/demo.html#view1

表示 “访问定义在 demo.html 中的，命名空间为 default，ID 为 view1 的视图”。而对于URL：

http://view-js.com/index.html#view2@myNamespace

则表示 “访问定义在 index.html 中的，命名空间为 myNamespace，ID 为 view2 的视图”。其中，@ 符号为 视图ID 与 视图命名空间的分隔符。

如果没有指定视图信息，那么页面打开后，View.js 将自动展现默认视图。

当活动视图发生变化时，View.js 将根据新的活动视图信息，实时构造新的 URL 并将其反馈到浏览器的地址栏中。

circle-info

视图当前仅支持 hash 形态的地址栏表示，且不支持自定义。出于简化开发的考虑，View.js 当前也并不打算变更这一特性。

hashtag
注意事项

每个视图都是以渲染模板的姿态唯一存在的，开发者需要使用 “静态模板 + 动态填充数据” 的方式完成视图的功能开发。

开发者可以动态、灵活调整视图内部的 DOM 结构，但不能删除、或替换视图的根结点 DOM 元素。

Previous简介Next视图命名空间

Last updated