页面与ViewModel(下)
在上一篇博客中,笔者分享了一些从页面整体的角度对页面与ViewModel的思考。在本文中笔者希望从相对细节的角度分享一些对页面与ViewModel的思考。
比如,当我们在更新View Model中的绑定数据时,应该怎样更新呢?简单的自然可以用新的数据实例直接替代旧的,但是这样容易造成UI界面闪烁。尤其是绑定数据是一个列表的情况下,如果整个列表被替换,可以非常明显的看到列表"一闪"。这样的用户体验无疑是不理想的。那么我们在更新View Model中绑定的数据实例时,可以采用差异更新的方法。以一个数据列表为例,在更新时对比新旧列表,先遍历新表,对每一个元素查看在旧表中有无对应元素。如果没有,说明是新增的数据,可以将该新表中的元素同时加入到一个临时表和旧表中,如果旧表有排序则还需要注意插入的位置。如果有,说明是旧元素更新,则用新元素的值更新旧元素后,将旧元素加入到临时表中。然后遍历旧表,对旧表中每一个元素在临时表中查看有无对应元素。如果有,则不用做任何处理。如果没有,则说明该元素已经被删除,应该在旧表中将这个元素移除。这样对UI界面的更新看起来会比较平滑。
这里写一下笔者在旺信UWP中所写的差异化更新算法,权当抛砖引玉。
var bList = new List<bool>();//辅助列表
for (int j = ; j < MainList.Count; j++)//辅助列表初始与旧表同长
{
bList.Add(false);
}
for (int i = ; i < groups.Count; i++)//遍历新表
{
bool inserted = false;
bool contains = false;
for (int j = ; j < MainList.Count; j++)//新表中的元素与旧表对比
{
if (groups[i].key != MainList[j].key)//如果不是同一元素
{
if ((groups[i].key == "群主")//尝试插入
|| (
MainList[j].key != "群主" && MainList[j].key != "管理员"
&& (groups[i].key == "管理员" || groups[i].key.CompareTo(MainList[j].key) < )
)
)
{
MainList.Insert(j, groups[i]);
bList.Insert(j, true);
inserted = true;
Debug.WriteLine("inserted:" + j + "," + groups[i].key);
break;
}
}
else//如果是同一元素,用新表元素内容更新旧表
{
contains = true;
MainList[j].update(groups[i]);
bList[j] = true;
break;
}
}
if ((!contains) && (!inserted))//不包括在旧表内,也没有插入,则追加在旧表尾部
{
MainList.Add(groups[i]);
bList.Add(true);
}
}
for (int i = bList.Count; i > ; i--)//对比辅助列表,移除旧表中不应再存在的元素
{
if (!bList[i-])
{
try
{
MainList.RemoveAt(i - );
}
catch (Exception)
{
Debug.WriteLine("RemoveAt error:" + i);
}
}
}
在这段代码中,用新的数据groups更新旧的数据MainList。
再比如,在我们的页面上,我们一般都会放置一个表示正在加载数据的控件。这个加载中控件的状态一般也是绑定一个后台数据的。对于一般的页面,我们可以采取在加载数据前后设置该绑定值的方法来修改页面所显示的加载状态。而对于UWP旺信这种依赖网络,一个页面可能同时调用多个网络接口更新数据的情况,就不是非常合适了。比如a,b两个接口同时请求数据,将加载状态置为加载中。如果a接口先返回,则会将加载状态置为完成。而实际上b接口仍然在请求数据,正确的加载状态应该还是加载中,直到b接口也返回。为此笔者想到了可以增加一个初始值为0的计数变量,当有加载请求时就自增1,当请求异步结束或回调返回时就自减1,绑定的加载状态的get方法根据当计数是否为0返回是否在加载状态。这样一来就可以使多个加载请求都能正确的改变加载状态。
在旺信UWP中,笔者就为ViewModel添加了这样的变量:
public bool isLoading
{
get { return loadingCount > ; }
} private int _loadingCount = ; public int loadingCount
{
get { return _loadingCount; }
set { _loadingCount = (value < ? : value); RaisePropertyChanged("isLoading"); }
}
在xaml页面上则将ProgressRing控件的IsActive属性绑定到isLoading变量上:
<ProgressRing Grid.Row="2" Grid.RowSpan="2" IsActive="{x:Bind thisData.isLoading,Mode=OneWay}" Width="60" Height="60" Foreground="{ThemeResource WXThemeColorBrush}"></ProgressRing>
在调用异步方法前后,并不直接设置isLoading变量,而是采取上面提到的,调用前loadingCount变量自增1,完成后loadingCount变量自减1的方法来影响ProgressRing控件所显示的加载状态IsActive。
另外,在使用x:Bind方法时,笔者发现如果把绑定image图片控件的source绑定到一个string,当绑定的string值为空时会在log中出现exception。即使在string值为空时把image控件隐藏也仍然会出现。然而旺信中数据的属性值基本都是从服务器传输到客户端的,有时确实会有一些图片的url为空。这样一来最好给图片属性值都给一个默认值。那么默认值该如何确定呢?如果是普通的占位图片,那么可能在不该出现图片的地方显示。经过实践,笔者选择了在应用中加入一个长度为0的图片,把该图片的uri作为图片属性的默认值。当然这个方法只是消除了log中的exception,具体是否提升了应用的效率,还有待验证。
以上就是笔者对对页面与ViewModel的细节的思考,希望能对小伙伴们开发UWP应用有所帮助。当然也欢迎大家拍砖,提出更多更好的经验,让我们共同进步。
页面与ViewModel(下)的更多相关文章
- mvvm框架下页面与ViewModel的各种参数传递方式
传单个参数的话在xaml用 Command={Binding ViewModel的事件处理名称} CommandParameter={Binding 要传递的控件名称} ViewMode ...
- JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址
JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...
- JS 模拟手机页面文件的下拉刷新
js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...
- ASP.NET MVC中的cshtml页面中的下拉框的使用
ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...
- selenium从入门到应用 - 5,页面对象设计模式下的页面模块
本系列所有代码 https://github.com/zhangting85/simpleWebtest 本文将介绍一个Java+TestNG+Maven+Selenium的web自动化测试脚本环境下 ...
- 广告域名审核之后跳转技术:点击域名A页面iframe框架下的链接,域名A跳转到域名B
广告域名审核之后跳转技术:点击域名A页面iframe框架下的链接,域名A跳转到域名B注:域名B为afish.cnblogs.com 域名A页面代码:<!DOCTYPE html PUBLIC & ...
- 页面与ViewModel(上)
在UWP淘宝与旺信中,笔者主要负责页面与控件的制作,这些工作看似简单,但要想做的全面细致仍然需要深入的思考.本文想分享一些在UWP旺信的制作过程中,笔者在UI页面与控件制作上体会到的一些心得.可能笔者 ...
- dragloader.js帮助你在页面原生滚动下实现Pull Request操作
dragloader.js是一个面向移动Web开发的JavaScript库,帮助开发者在使用页面原生滚动时,模拟上/下拉手势,实现Pull Request操作. 在移动设备上,一般会使用 drag d ...
- jsp页面在IE8下文本模式自动为“杂项(Quirks)”导致页面显示错位
最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式显示乱样了,但是 ...
随机推荐
- Storm如何保证可靠的消息处理
作者:Jack47 PS:如果喜欢我写的文章,欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文主要翻译自Storm官方文档Guaranteeing messag ...
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- TODO:即将开发的第一个小程序
TODO:即将开发的第一个小程序 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.个人理解小程序是寄宿在微信平台上的一个前端框架,具有跨平台功能, ...
- win7安装时,避免产生100m系统保留分区的办法
在通过光盘或者U盘安装Win7操作系统时,在对新硬盘进行分区时,会自动产生100m的系统保留分区.对于有洁癖的人来说,这个不可见又删不掉的分区是个苦恼.下面介绍通过diskpart消灭保留分区的办法: ...
- Spring之旅(2)
Spring简化Java的下一个理念:基于切面的声明式编程 3.应用切面 依赖注入的目的是让相互协作的组件保持松散耦合:而AOP编程允许你把遍布应用各处的功能分离出来形成可重用的组件. AOP面向切面 ...
- iOS开发之ReactiveCocoa下的MVVM(干货分享)
最近工作比较忙,但还是出来更新博客了,今天给大家分享一些ReactiveCocoa以及MVVM的一些东西,干活还是比较足的.在之前发表过一篇博文,名字叫做<iOS开发之浅谈MVVM的架构设计与团 ...
- <译>通过PowerShell工具跨多台服务器执行SQL脚本
有时候,当我们并没有合适的第三方工具(大部分需要付费)去管理多台数据库服务器,那么如何做最省力.省心呢?!Powershell一个强大的工具,可以很方便帮到我们处理日常的数据库维护工作 .简单的几步搞 ...
- jsp页面无法识别el表达式的解决方案
今天在写一个springmvc的小demo时,碰到一个问题,在jsp页面中书写为${user.username}的表达式语言,在浏览器页面中仍然显示为${user.username},说明jsp根本不 ...
- UWP简单示例(三):快速开发2D游戏引擎
准备 IDE:VisualStudio 2015 Language:VB.NET/C# 图形API:Win2D MSDN教程:UWP游戏开发 游戏开发涉及哪些技术? 游戏开发是一门复杂的艺术,编码方面 ...
- Spring获取ApplicationContext
在Spring+Struts+Hibernate中,有时需要使用到Spring上下文.项目启动时,会自动根据applicationContext配置文件初始化上下文,可以使用ApplicationCo ...