MVVM 与 ReactiveCocoa 的运用(1)

  • MVVM和数据绑定

MVVM模式依赖于数据绑定,能自动将对象属性和UI controls相联系是其框架级的特性.

举个例子,在微软的WPF框架里,ViewModel将TextField里的Text属性和Username属性绑定,如下所示:

WPF框架将两个属性绑定在一起.

TwoWay绑定确保ViewModel中的Username属性改变时会为TextField的Text属性改变做准备,而且可逆.例如用户输入时ViewModel的变化.

另一个例子是著名的基于MVVM的网页框架Knockout,你可以在动作里看到相似的绑定特性:

上面将HTML元素的一个属性和JavaScript模型绑定.

遗憾的是,iOS缺乏数据绑定的框架,但这正是ReactiveCocoa所扮演的角色:进行ViewModel连接”粘合”工作.

从iOS开发的角度来看MVVM模式,ViewController和其相关的UI(无论是nib、storyboard或者纯代码组成的View):

MVVMReactiveCocoa.png

….通过ReactiveCocoa将它们绑定在一起.

理论知识已经补的差不多了吧?如果不熟悉,可以回去复读一下.如果觉得还可以,那就开始编写ViewModels吧.

  • 开始项目架构

首先下载一下初始项目:

项目用CocoaPods来管理依赖库(如果你对CocoaPods不熟,这有你需要的教程].运行命令行pod install来获取依赖库,确保你会看到以下输出:

你将会学到这些库的很多用法.

初始项目已经用view controllers和nib文件为你准备好了应用所需的视图.打开CocoaPods所生成的RWTFlickrSearch.xcworkspace,运行后,你将看到其中的一个视图:

first-launch.jpg

花些时间来熟悉下项目的结构:

EmptyInterface.png

Model和ViewModel group是空的,待会你将在里面添加文件.View Group包含以下内容:

  • RWTFlickSearchViewController:程序的主界面,包含一个搜索text field和一个’Go’按钮.
  • RWTRecentSearchItemTableViewCell:在主界面展示最近搜索结果的table cell.
  • RWTSearchResultsViewController:展示搜索结果Flickr图片的table.
  • RWTSearchResultsTableViewCell:展示单个Flickr图片的table cell.

好了,该开始编写你的第一个view model噜.

  • 你的首个ViewModel

在ViewModel组里添加一个名为RWTFlickrSearchModel的NSObject的子类.

打开此文件的头文件,添加如下属性:

SearchText属性为text field里面输入的文字,title属性为navigation bar上的title.

打开RWTFlickrSearchViewModel.m添加如下代码:

以上代码用来进行ViewModel的初始化.

接下来将ViewModel和View连接.要记得View拥有对ViewModel的引用.当前给出的是相应ViewModel模型的View的初始化.

在RWTFlickrSearchViewController.h里导入ViewModel的头文件:

接着添加初始化方法:

在RWTFlickrSearchViewController.m里面添加一个私有属性来控制UI outlets:

继而添加初始化方法:

这将存储一个View对ViewModel的引用.

在viewDidLoad的底部增加:

然后实现以下方法:

上面的代码当UI初始化和ViewModel状态给View是调用.

 

最后是创建个ViewModel的实例以供View使用.

 

RWTAppDelegate.m增加如下导入:

添加一个私有属性:

你会发现这个类已经有个方法createInitialViewController,更新它的实现代码:

以上代码用来创建一个ViewModel的新实例,继而构建和返回View.作用为初始化应用的navigation controller.
运行程序,你将看到View有一些状态!

ViewWithState-333×500.png

恭喜哦,这是你的第一个ViewModel.请克制你的兴奋,还有许多要学;]

也许你觉察到还木有用到ReactiveCocoa.当前,如果你在搜索text field输入内容将不会传递到ViewModel.

  • 检测有效的搜索状态

本章节,你将使用ReactiveCocoa绑定ViewModel和View以使搜索text field和按钮能和ViewModel连接.

RWTFlickrSearchViewController.m更新bindViewModel;

通过ReactiveCocoa的一个category给UITextField的类添加了rac_textSignal属性.这是个text field当前文本内容更新的信号量.

RAC宏是个绑定操作,上面的代码通过rac_textSignal来监测输入的状态实时更新viewModel中的searchText属性.

简言之,就是确保seachText属性能实时反映出当前的UI状态.如果你觉得难以理解,那么最好去读读之前的两篇ReactiveCocoa tutorials!

搜索按钮只有在用户输入合法的文本时才能使用.我们设定只有在输入超过三个字符时才能进行搜索.

在RWTFlickrSearchViewModel.m里增加如下导入:

更新初始化方法里的内容:

运行程序,在text field里持续输入内容.你将从日志中看到text在合法和不合法状态间改变:

上面的代码使用RACObserve宏在ViewModel中的searchText属性创建一个信号量(这就是ReactiveCocoa对KVO的包装).一个map操作将text转换为真假值.

最后distinctUnitlChanges使信号量只有在值状态改变时发出.

截止现在你看到的是用ReactiveCocoa将View绑定到ViewModel,使之得到同步.另外,ReactiveCocoa经常在ViewModel里来监测它本身状态来进行其它操作.

这种类型贯穿本MVVM教程.ReactiveCocoa用来绑定View和ViewModel,但在应用其它layers里也会有用.

  • 增加一个搜索指令

本章节,你将使用validSearchSignal做更多事情:创建一个绑定View的指令.

RWTFlickrSearchViewModel.h增加如下导入:

添加属性:

RACCommand是ReactiveCocoa中呈现UI动作的组件.它包含一个来表示UI动作结果、当前状态、标明动作是否被执行的信号量.

在RWTFlickrSearchViewModel.m里的initialize方法的尾部增加:

当validSearchSignal为真时创建的指令为可用.
接着添加如下方法来提供创建执行指令的信号量:

在这个方法中将执行一些业务逻辑作为执行命令的结果,并会通过信号异步地返回结果.

目前只完成了一个虚拟的执行情况;空信号立即完成.延迟操作增加了完成事件返回后的两秒延迟.用来使代码看起来更加真实.

最后一步为将这个指令添加到View中.打开RWTFlickrSearchViewController.m在bindViewModel方法的尾部添加:

上面的rac_command属性为ReactiveCocoa给UIButton添加的扩展.用来确保button点击后指定的命令执行,并且按钮的可用状态反应了命令的可用状态.

运行,输入一些文本,点击Go:

GoButtonEnabled-333×500.png

你会看到按钮只有在输入文本大于三个字符时才可用.而且当年你点击按钮后两秒内不可用,当执行完信号量的时候才又变得可用了. 在console里,你将看到空信号量立即完成,两秒后延迟操作

是不是超酷?

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部