惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Stack Overflow Blog
Stack Overflow Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
H
Hacker News: Front Page
S
Security Affairs
Google Online Security Blog
Google Online Security Blog
Attack and Defense Labs
Attack and Defense Labs
H
Heimdal Security Blog
S
Securelist
S
Secure Thoughts
N
News and Events Feed by Topic
T
The Exploit Database - CXSecurity.com
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Last Week in AI
Last Week in AI
The Last Watchdog
The Last Watchdog
N
News | PayPal Newsroom
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
IT之家
IT之家
宝玉的分享
宝玉的分享
有赞技术团队
有赞技术团队
O
OpenAI News
V
Vulnerabilities – Threatpost
S
Schneier on Security
Cyberwarzone
Cyberwarzone
雷峰网
雷峰网
罗磊的独立博客
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
J
Java Code Geeks
Google DeepMind News
Google DeepMind News
The Cloudflare Blog
美团技术团队
人人都是产品经理
人人都是产品经理
T
The Blog of Author Tim Ferriss
T
Tor Project blog
P
Privacy International News Feed
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Google DeepMind News
Google DeepMind News
S
Security @ Cisco Blogs
Project Zero
Project Zero
Security Archives - TechRepublic
Security Archives - TechRepublic
Schneier on Security
Schneier on Security
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
P
Proofpoint News Feed
K
Kaspersky official blog
P
Privacy & Cybersecurity Law Blog
aimingoo的专栏
aimingoo的专栏
L
LINUX DO - 热门话题
V
V2EX
Blog — PlanetScale
Blog — PlanetScale
www.infosecurity-magazine.com
www.infosecurity-magazine.com
U
Unit 42

博客园 - 麦舒

网站访问速度的优化 ERP 订单打印的优化 页面 SEO 信息的优化 一个网站首页重构小记 广告播放软件的开发 项目分享九:客户端的异常处理 项目分享八:基于按钮点击事件的弹窗 项目分享七:客户端防止表单重复提交 项目分享六:图片的延迟加载 项目分享五:H5图片压缩与上传 项目分享四:购物车页面的更新 项目分享二:APP 小红点中数字的处理 项目分享一:在项目中使用 IScroll 所碰到的那些坑 微信开发——通过授权获取用户的基本信息 千呼万唤岂出来,写款软件不容易——Visual Entity 2.0 发布 实现虽易,写好不易——小玩意也能体现编码功力,微信消息处理框架发布 代码重构之 —— 一堆if、esle 逻辑的处理 ALinq Dynamic 使用指南——慨述(上) ALinq Dynamic 使用指南——代码的获取与编译
项目分享三:页面之间的传值
麦舒 · 2015-12-16 · via 博客园 - 麦舒

项目分享三:页面之间的传值

2015-12-16 11:08  麦舒  阅读(2137)  评论()    收藏  举报

一、回调函数的使用

我们首先来看一下,页面间传值的一个经典例子,列表页与明细页之间的传值,如下面二张图所图。在列表页点击评价晒单,进入评价晒单页面,当用户在该页面完成操作后,列表页对应的选项,相应地改为“已评价"。那么这个是怎么实现的呢?在这个案例里面,使用的是 回调函数 ,我们来看一下相关的代码。

下面这段代码,是列表页的代码,当用户点击”评价晒单“按钮时,打开评价晒单详细页。关键点在于 evaluatePage['submited'] 这个回调函数。

 evaluate = (item) => {
        var evaluatePage = app.redirect('Shopping_ProductEvaluate', { orderDetailId: item.OrderDetailId, productImageUrl: item.ImageUrl });
        evaluatePage['submited'] = () => {
            item.Status('Evaluated');
        }
    }

下面这段代码,是明细页中的代码,当用户发表完评价,调用回函数。

submit = () => {
        var imageDatas = this.imageDatas().join(site.config.imageDataSpliter);
        var imageThumbs = this.imageThumbs().join(site.config.imageDataSpliter);
        var orderDetailId = this.orderDetailId();
        return account.evaluateProduct(orderDetailId, this.score(), this.evaluation(), this.anonymous(), imageDatas, imageThumbs)
            .done((data) => {
                if ((<any>this.page).submited)        //这里就是调用列表页设定的回调函数。
                    (<any>this.page).submited(data);

                app.back();
            });

    }

二、回调函数还全局变量?

回想我们在上一篇文章《项目分享二:APP 小红点中数字的处理》所说的,用的是全局变量,那么什么时候应该用回调函数,而什么时候又该用全局变量呢?

回调函数:如果值只在两个页面之间发生关系,使用回调函数。

全局变量:如果值在多个页面中用到,页面传递的路径是多层的,即 A页面 -> B页面 -> C页面 -> D 页面,然后在 D页面修改。并且,还有可能在多个页面中修改。这时候就要使用全局变量了。

例如:购物车中的商品数量,它在底部的工具栏,和产品页面都有用到。

三、列表页的刷新

从明细页返回到列表页,是不是还要把页面再刷新一次呢?如果你这么想,那就是传 WEB 页面的思考方式。这是一个 WEB APP,从列表页到明细页,其实列表页并没有关闭,只是隐藏而已已。所谓的返回到列表,是重新把页面显示出来。

把页面重新显示,数据总不能是旧的吧。但是,重新从服务端再获取一次,肯定不是个好办法。所以就了上面我们说的方案了。要理解这篇文章,还是要有点 WEB APP 相关的知识。

整个项目源码已托管在 GitHub 上,https://github.com/ansiboy/ChiTuStore,谢谢阅读。

项目分享二:APP 小红点中数字的处理

项目分享一:在项目中使用 IScroll 所碰到的那些坑