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

全局可观察变量?没听说过,只听过全局变量,那你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. iOS 中实现功能引导页面

    // //  guideView.h //  07-功能引导-李洪强 // //  Created by vic fan on 16/1/4. //  Copyright © 2016年 李洪强. A ...

  2. gerrit使用教程

      注:使用时把“user”替换为自己的账号,例如 ueapp: ssh://huang.fei@10.0.64.16:29418/jonet2_0_app_ueapp.git 新的环境下需要先注册g ...

  3. android-对话框

    一.常用对话框 AlertDialog: 功能最丰富,实际应用最广的对话框(以下三种对话框都是该对话框的子类) ProgressDialog:进度对话框.这个对话框只是对进度条的包装 DatePick ...

  4. 一次有趣的XSS漏洞挖掘分析(1)

    最近认识了个新朋友,天天找我搞XSS.搞了三天,感觉这一套程序还是很有意思的.因为是过去式的文章,所以没有图.但是希望把经验分享出来,可以帮到和我一样爱好XSS的朋友.我个人偏爱富文本XSS,因为很有 ...

  5. Python字符串,元组、列表、字典

    1.字符串 <string>.strip() 去掉两边空格及去指定字符 <string>.split() 按指定字符分隔字符串为数组 <string>.isdigi ...

  6. Java代理模式

    java代理模式及动态代理类 1.      代理模式 代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目 ...

  7. BizTalk动手实验(十四)AS2传输非EDI消息

    1 课程简介 本课程通过AS2协议完成XML文件的传输过程,传输之后同步接收MDN确认信息.通过本课程熟悉AS2传输解决方案的基本开发与配置方法. 2 准备工作 为了模拟实际的B2B交互过程,本实验需 ...

  8. 400 Bad Request(angluarJs)

    今天做一个编辑的功能的时候,像后台传递一个实体,结果报400 Bad Request的错误....找了好久也没发现错误,老是报(不支持GET方式提交),检查好多遍我都是用的POST...不知道问题出在 ...

  9. 第三方支付过程中session失效问题

    第三方支付过程中session失效问题 时间 2015-05-13 12:36:23  IT社区推荐资讯 原文  http://itindex.net/detail/53436-session-问题 ...

  10. Kafka - protocol

    http://kafka.apache.org/protocol   具体的协议看原文,   Preliminaries Network Kafka uses a binary protocol ov ...