wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制
一 先说说,这两个概念是什么意思
全局可观察变量?没听说过,只听过全局变量,那你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 教程 之 图文讲解 全局可观察变量与登陆状态全局控制的更多相关文章
- wex5 教程 之 图文讲解 考题模块框架设计
前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下. 一 效果演示: 1 登陆后台 题库管理 试卷管理 考生管理 科目管理 2 考生注 ...
- wex5 教程 之 图文讲解 bind-css和bind-sytle的异同
wex5作为网页开发利器,在前台UI数据交互设计中大量使用了绑定技术,即官方视频教学中也提到了KO,实质是数据绑定与追踪.在前台组件的属性中,为我们提供了两个重要的样式绑定属性,bind-css和bi ...
- wex5 教程 之 图文讲解 后台管理界面设计与技巧
视频教程地址:http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0 ...
- wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术
一 前言: wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象.在以后我的项目开发中,将大量运用可观察对象. 那么,问题来了: 1. 可观察对 ...
- wex5 教程之 图文讲解 文件上传attachmentSimple(1)
视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html 效果预览: 1 调用attchmentSimple组件,打开文件管理器,并选中,显 ...
- wex5 教程之 图文讲解 Cloudx5一键部署
视频教程地址:http://v.youku.com/v_show/id_XMTc3OTExNTUwNA==.html 效果预览: 一键部署cloudx5三要领 1.数据源命名为x5 2.数据库命名为x ...
- wex5 教程 之 图文讲解 登陆,注册,页面跳转
视频教程地址:http://v.youku.com/v_show/id_XMTc3OTE0Nzg0NA==.html 效果预览: 登陆页面 首页用windowContainer装载 注册页面 登陆 ...
- 精美图文讲解Java AQS 共享式获取同步状态以及Semaphore的应用
| 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...
- IDEA 新建 Java 项目 (图文讲解, 良心教程)
IDEA 新建 Java 项目 (图文讲解, 良心教程) 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载 ...
随机推荐
- iOS 中实现功能引导页面
// // guideView.h // 07-功能引导-李洪强 // // Created by vic fan on 16/1/4. // Copyright © 2016年 李洪强. A ...
- gerrit使用教程
注:使用时把“user”替换为自己的账号,例如 ueapp: ssh://huang.fei@10.0.64.16:29418/jonet2_0_app_ueapp.git 新的环境下需要先注册g ...
- android-对话框
一.常用对话框 AlertDialog: 功能最丰富,实际应用最广的对话框(以下三种对话框都是该对话框的子类) ProgressDialog:进度对话框.这个对话框只是对进度条的包装 DatePick ...
- 一次有趣的XSS漏洞挖掘分析(1)
最近认识了个新朋友,天天找我搞XSS.搞了三天,感觉这一套程序还是很有意思的.因为是过去式的文章,所以没有图.但是希望把经验分享出来,可以帮到和我一样爱好XSS的朋友.我个人偏爱富文本XSS,因为很有 ...
- Python字符串,元组、列表、字典
1.字符串 <string>.strip() 去掉两边空格及去指定字符 <string>.split() 按指定字符分隔字符串为数组 <string>.isdigi ...
- Java代理模式
java代理模式及动态代理类 1. 代理模式 代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目 ...
- BizTalk动手实验(十四)AS2传输非EDI消息
1 课程简介 本课程通过AS2协议完成XML文件的传输过程,传输之后同步接收MDN确认信息.通过本课程熟悉AS2传输解决方案的基本开发与配置方法. 2 准备工作 为了模拟实际的B2B交互过程,本实验需 ...
- 400 Bad Request(angluarJs)
今天做一个编辑的功能的时候,像后台传递一个实体,结果报400 Bad Request的错误....找了好久也没发现错误,老是报(不支持GET方式提交),检查好多遍我都是用的POST...不知道问题出在 ...
- 第三方支付过程中session失效问题
第三方支付过程中session失效问题 时间 2015-05-13 12:36:23 IT社区推荐资讯 原文 http://itindex.net/detail/53436-session-问题 ...
- Kafka - protocol
http://kafka.apache.org/protocol 具体的协议看原文, Preliminaries Network Kafka uses a binary protocol ov ...