`
mywebcode
  • 浏览: 988171 次
文章分类
社区版块
存档分类
最新评论

sencha touch笔记(11)——localstorage实现本地收藏功能以及图标的变换

 
阅读更多

st实现收藏功能一个是通过调用接口,另一个是通过localstorage进行本地数据的保存和存储获取。如果是本地进行存储并且要实现收藏按钮随时更新状态,并且能够根据时候收藏进行变化的话,就需要每次展现页面数据的时候查看当前数据是否在localstorage里面,如果是的话,就添加一个收藏样式的图标,如果不是的话,则添加一个还没有收藏样式的图标。比如在我这里,每次要去加载页面的时候都要去看下localstorage的情况:

var isLiked = favourites.find('id', likecoureseId);
						
					if(isLiked === -1) {
						var btnCol= Ext.ComponentQuery.query('button[text = "收藏"]')[0];
						btnCol.setIconCls('like_icon');
					}else {
						var btnCol= Ext.ComponentQuery.query('button[text = "收藏"]')[0];
						btnCol.setIconCls('after_like_icon');
					}
通过这种近似于‘轮询’的方式可以实现localstorage的收藏按钮的同步变化;

要实现点击收藏的功能,需要的函数一个是add,一个是remove,其实在localstorage里面保存的到底还是一个store而已,只不过你将这个store的存储方式定义为了‘localstorage’而已。那么在执行收藏操作的时候直接将当前的数据塞到对应的store内即可。代码如下:

likeAct: {
				tap: function(btn) {
					var me = this;
					var likecoureseId = PiNewsRecord.id;
					var favourites = Ext.data.StoreManager.lookup('LikeNews_store');
					
					var isLiked = favourites.find('id', likecoureseId);
					
					if(isLiked === -1) {
						favourites.add(PiNewsRecord);
 						util.showMessage('收藏成功', true);
 						//Ext.Msg.alert('收藏成功');
 						var likeBtn = document.getElementsByClassName("item_button_style")[1];
 						btn.setIconCls('after_like_icon');
					}else {
						favourites.remove(favourites.getAt(isLiked));
						util.showMessage('取消收藏', true);
						btn.setIconCls('like_icon');
					}
					favourites.sync();
				}
			},

而对于在线收藏的原因应该也差不多,只不过相对于localstorage轮询式的查询方式,在线收藏要做的只是判断一下调用收藏接口时所返回的状态值而已。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics