我是靠谱客的博主 失眠小蝴蝶,最近开发中收集的这篇文章主要介绍八、HTML5单页框架View.js介绍 - 默认视图,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

不需要 Npm 的单页应用框架:

View.js - http://view-js.com


当使用View.js构建的应用程序同时包含多个视图时,开发者可能需要明确指定页面加载完成后要默认呈现的第一个视图。

这个需要默认呈现的视图,就是默认视图。在没有明确指定时,View.js将默认使用DOM树中自上而下的第一个视图为默认视图。

必要时,开发者可以使用 data-view-default 属性静态指定,如下所示:

<!DOCTYPE HTML>
<html>
<head>
    <link rel = "stylesheet" href = "js/plugin/view/view.min.css"/>
 
    <link rel = "stylesheet" href = "css/main/view1.css"/>
    <link rel = "stylesheet" href = "css/main/view2.css"/>
</head>
<body>
    <section id = "view1" data-view = "true" data-view-title="View title 1">
        ...
    </section>
    <section id = "view2" data-view = "true" data-view-title = "View title 2" data-view-default = "true">
        ...
    </section>
 
    <script type = "text/javascript" src = "js/plugin/view/view.min.js"></script>
</body>
</html>

虽然视图 view1 先于 view2 存在,但由于视图 view2 被开发者明确指定为默认视图,所以页面打开后,View.js将自动展现 view2。

如果有多个视图被静态声明为默认视图,则View.js将依据DOM自上而下的顺序,使用声明的第一个默认视图。

 

开发者也可以在页面加载完成前通过脚本动态指定,如下所示:

View.beforeInit(function(){
    View.setAsDefault("home-page");

    console.log(View.getDefaultView().getId());// --> home-page
});

 

同时,为帮助开发者实现业务代码的松耦合,View.js允许开发者在执行视图切换操作时,使用 ":default-view" 伪视图代替具体的视图名,如下所示:

View.beforeInit(function(){
    View.setAsDefault("home-page");
});

//...

View.navTo(":default-view");//等同于 View.navTo("home-page")

 


[第一篇]
[上一篇 - 视图] [下一篇 - 活动视图]

最后

以上就是失眠小蝴蝶为你收集整理的八、HTML5单页框架View.js介绍 - 默认视图的全部内容,希望文章能够帮你解决八、HTML5单页框架View.js介绍 - 默认视图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(39)

评论列表共有 0 条评论

立即
投稿
返回
顶部