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, 转载 ...
随机推荐
- sign in和sign up区别
如果是网站的话sign up是注册,sign in是登录的意思,另外,sign out退出
- HTML5初学篇章_3
表单的标签是<form>,它使页面与客户的互动成为可能.而它的大部分元素字自HTML2.0后就没有再改变过,由此可见这是一个多么具有卓越性的设计. <form>标签是用于创建供 ...
- 对C++对象实例化的测试
#include <iostream> using namespace std; class class1 { public: class1(){ } class1(int i ){ } ...
- VS 调试
Vs 单步调试 在vs中的单步调试: 调试重要的几个键: F9在当前光标所在的行下断点,如果当前行已经有断点,则取消断点. F5调试状态运行程序,程序执行到有断点的地方会停下来. F10单步执行程序. ...
- 【转】Linux安装方法一(U盘引导)
Ubuntu 13.04正式版已经在4月25日发布了,相信很多人和我一样很想安装体验一下,但是现在的Ubuntu 13.04文件已经是794M,但是很难刻录到一张CD中,所以采用U盘启动安装Ubunt ...
- Memcached 笔记与总结(7)增加虚拟节点
仅仅把 Memcached 服务器集群地址通过一致性哈希转映射在圆环上,可能会出现数据不能均匀地分配给各台 Memcached 服务器. 解决方案是引入虚拟节点,就是把每个映射在圆环上的服务器地址(物 ...
- ssm maven项目启动 报SYSTEM_PROPERTIES_MODE_ENVIRONMENT
1.jar包冲突,查看项目中的jar和pom.xml中配置的jar包 版本,把没用的jar包删掉
- 【转】发布一个基于NGUI编写的UI框架
发布一个基于NGUI编写的UI框架 1.加载,显示,隐藏,关闭页面,根据标示获得相应界面实例 2.提供界面显示隐藏动画接口 3.单独界面层级,Collider,背景管理 4.根据存储的导航信息完成界面 ...
- Android开发之Intent略解
Intent是一种运行时绑定(run-time binding)机制,它能在程序运行过程中连接两个不同的组件.通过Intent,你的程序可以向Android表达某种请求或者意愿,Android会根据意 ...
- Wordpress基础:精简头部wp_head
在Wordpress里 <?php wp_head(); ?> wp_head()是一个重要的函数,它允许插件开发者向你的站点动态地添加CSS和javascript,如果我们不在模板中引入 ...