一 先说说,这两个概念是什么意思

全局可观察变量?没听说过,只听过全局变量,那你out了,因为我要充分发挥绑定技术来控制页面部局,组件的隐藏与显示,文字内容,样式改变。看我博文大家知道,我想用绑定技术贯穿整个web开发,目的是为了少写代码或不写代码,控制起来更灵活。一会用实例说说全局可观察变量的前世今生。

登陆状态全局控制?登陆状态,大家知道,无非就是登陆与退出。全局控制呢?就是说登陆后能进入哪些页面,操作哪些组件,拥有对哪些界面的操作权限。

那问题来了,如何用代码实现根据登陆状态来控制页面及组件呢?

举个实例:

未登陆前

登陆后,把图片和登陆按钮去掉,并显示用户id,如下图:

二 设计思路:

再没看我此文之前是,我们先想想,实现方法都有哪些?\

1 .根所登陆状态的字段,仍然用绑定技术来控制界面。

可以。

前提是:

1 登陆状态提交到数据库

2 把ID用传参方法传给相应页面

3 根据用户ID过滤出当前行

4 根据当前行的loginState登陆状态字段来实现。

每1 步和第3步,容易实现,那第二行的ID呢?

常规方法是传参,登陆成功后将id传到main页面。让main页面接收,再将id分配到不同的子页面,或者再深入的传至二、三、四甚至几十个页面。

我的天哪,也就是用到了平行与纵向页面数量过多或层级过多的话,每个页面的首要任务是接收参数,并过滤出每一条数据。真是天文数字。修改一次或出错了,真是越走越远,死的心都有了。

再回过头来看参数接收,坑也不少。不是所有页面都具有参数接收能力。

比如下面这个界面:

诡异的问题,login后传到main页面的参数不能接收参数。居然要加一个windowReceiver组件来接收参数。

接收之后呢??

再用windowContainer的传参方法,往相应的页面传参。

.........................

先不说设计的复杂度了,我只要一个用户 ID而已,至于在众多页面里传来传去吗??也够太费劲了。小白估计没几个进行下去的。

2 全局变量

web开发中,听说过,能用到的全局变量很多,一一分析。

1 session 不多说,大家都在用,跟页面生命周期相关,几十个页面,一一来操作,费劲。

2 localStorage 本地存储,问题是关了程序,必须清除localStorage相关键值。不是我想要的效果

3 justep.Shell.XXXXX这个方法很好,可惜页面跳转会失效,justep.Shell.show(""),不行了。不是真正的全局啊。

4 window.XXXX,这才是我的个神啊,只要是web打开状态,怎么样页面都可以全局。那么,window.XXXX作为今天的主角,登场了。

三 全局可观察变量的使用与坑

1 创建方法:

在首页如图位置,创建userUUID和userState,并赋于可观察属性。

window.userUUID = justep.Bind.observable(); //
window.userState = justep.Bind.observable(); //

2 main主页装载

重要的事情只说一遍:

main页面必须有,在里面放windowCantainer ,装一个首页即可。这里的首页只是为了展示界面。真正的页面切换与跳转,我们不用contents页面容器。因为在window装装机制中,home页面只能取到window.xxxxx值,却得不到可观察属性.

3 .页面切换与跳转

实测表明,用justep.Shell.showPage("home")方法跳转到home页面,home页面居然可以得到window.XXXX的可观察属性了。神奇。

代码如下:

登陆后,全局变量userState状态为1,那么,不是1的时候,欢迎图片与登陆按钮显示,登陆扣则隐藏。

有几什个组件几十个页面,用这句话来控制,超简单。与之前大家写过的css,js方法比比,0代码编程,绑定技术功不可没。

4. 分页模式模拟单页模式:

其实是对页面进行重构。

单页模式是在contents 页面集合容器里放了多个页面,用button的target来关联页面,那么,我现在全是showPage,成了html5的单页模式,怎么办呢?

方法很简单,底部放一组相同的按钮即可,看起来,还是在单页模式里操作。

新的问题来了,组件高亮显示与页面不对应啊?

这也简单,强制改一下按钮里span的颜色,哪个页面,你改哪个span的颜色,其它三个一样,不就行了吗?

我这里mine页里,span改成黄色,其它是蓝色。

四 总结:

看似简单,其实我进行了三天的反复测试,在遇到问题的时候,心里一定要有信心能把想法实现,没有解决是因为还没分析出问题的本质。

1 有信心

2 不怕浪费时间

3 不怕反复的测试麻烦

4 收获成功后的喜悦

wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制的更多相关文章

  1. wex5 教程 之 图文讲解 考题模块框架设计

    前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下. 一 效果演示: 1 登陆后台 题库管理 试卷管理 考生管理 科目管理 2 考生注 ...

  2. wex5 教程 之 图文讲解 bind-css和bind-sytle的异同

    wex5作为网页开发利器,在前台UI数据交互设计中大量使用了绑定技术,即官方视频教学中也提到了KO,实质是数据绑定与追踪.在前台组件的属性中,为我们提供了两个重要的样式绑定属性,bind-css和bi ...

  3. wex5 教程 之 图文讲解 后台管理界面设计与技巧

    视频教程地址:http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0 ...

  4. wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术

    一 前言: wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象.在以后我的项目开发中,将大量运用可观察对象. 那么,问题来了: 1. 可观察对 ...

  5. wex5 教程之 图文讲解 文件上传attachmentSimple(1)

    视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html 效果预览: 1 调用attchmentSimple组件,打开文件管理器,并选中,显 ...

  6. wex5 教程之 图文讲解 Cloudx5一键部署

    视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html 效果预览: 一键部署cloudx5三要领 1.数据源命名为x5 2.数据库命名为x ...

  7. wex5 教程 之 图文讲解 登陆,注册,页面跳转

    视频教程地址:http://v.youku.com/v_show/id_XMTc3OTE0Nzg0NA==.html 效果预览: 登陆页面   首页用windowContainer装载 注册页面 登陆 ...

  8. 精美图文讲解Java AQS 共享式获取同步状态以及Semaphore的应用

    | 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...

  9. IDEA 新建 Java 项目 (图文讲解, 良心教程)

    IDEA 新建 Java 项目 (图文讲解, 良心教程) 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载 ...

随机推荐

  1. sign in和sign up区别

    如果是网站的话sign up是注册,sign in是登录的意思,另外,sign out退出

  2. HTML5初学篇章_3

    表单的标签是<form>,它使页面与客户的互动成为可能.而它的大部分元素字自HTML2.0后就没有再改变过,由此可见这是一个多么具有卓越性的设计. <form>标签是用于创建供 ...

  3. 对C++对象实例化的测试

    #include <iostream> using namespace std; class class1 { public: class1(){ } class1(int i ){ } ...

  4. VS 调试

    Vs 单步调试 在vs中的单步调试: 调试重要的几个键: F9在当前光标所在的行下断点,如果当前行已经有断点,则取消断点. F5调试状态运行程序,程序执行到有断点的地方会停下来. F10单步执行程序. ...

  5. 【转】Linux安装方法一(U盘引导)

    Ubuntu 13.04正式版已经在4月25日发布了,相信很多人和我一样很想安装体验一下,但是现在的Ubuntu 13.04文件已经是794M,但是很难刻录到一张CD中,所以采用U盘启动安装Ubunt ...

  6. Memcached 笔记与总结(7)增加虚拟节点

    仅仅把 Memcached 服务器集群地址通过一致性哈希转映射在圆环上,可能会出现数据不能均匀地分配给各台 Memcached 服务器. 解决方案是引入虚拟节点,就是把每个映射在圆环上的服务器地址(物 ...

  7. ssm maven项目启动 报SYSTEM_PROPERTIES_MODE_ENVIRONMENT

    1.jar包冲突,查看项目中的jar和pom.xml中配置的jar包 版本,把没用的jar包删掉

  8. 【转】发布一个基于NGUI编写的UI框架

    发布一个基于NGUI编写的UI框架 1.加载,显示,隐藏,关闭页面,根据标示获得相应界面实例 2.提供界面显示隐藏动画接口 3.单独界面层级,Collider,背景管理 4.根据存储的导航信息完成界面 ...

  9. Android开发之Intent略解

    Intent是一种运行时绑定(run-time binding)机制,它能在程序运行过程中连接两个不同的组件.通过Intent,你的程序可以向Android表达某种请求或者意愿,Android会根据意 ...

  10. Wordpress基础:精简头部wp_head

    在Wordpress里 <?php wp_head(); ?> wp_head()是一个重要的函数,它允许插件开发者向你的站点动态地添加CSS和javascript,如果我们不在模板中引入 ...