MVVM与ReactiveCocoa的运用(Part1)
本文翻译自MVVM Tutorial with ReactiveCocoa
- MVVM和数据绑定
MVVM模式依赖于数据绑定,能自动将对象属性和UI controls相联系是其框架级的特性.
举个例子,在微软的WPF框架里,ViewModel将TextField里的Text属性和Username属性绑定,如下所示:
<TextField Text=”{DataBinding Path=Username, Mode=TwoWay}”/>
WPF框架将两个属性绑定在一起.
TwoWay绑定确保ViewModel中的Username属性改变时会为TextField的Text属性改变做准备,而且可逆.例如用户输入时ViewModel的变化.
另一个例子是著名的基于MVVM的网页框架Knockout,你可以在动作里看到相似的绑定特性:
<input data-bind=”value: username”/>
上面将HTML元素的一个属性和JavaScript模型绑定.
遗憾的是,iOS缺乏数据绑定的框架,但这正是ReactiveCocoa所扮演的角色:进行ViewModel连接"粘合"工作.
从iOS开发的角度来看MVVM模式,ViewController和其相关的UI(无论是nib、storyboard或者纯代码组成的View):
MVVMReactiveCocoa.png
....通过ReactiveCocoa将它们绑定在一起.
理论知识已经补的差不多了吧？如果不熟悉,可以回去复读一下.如果觉得还可以,那就开始编写ViewModels吧.
- 开始项目架构
首先下载一下初始项目:
项目用CocoaPods来管理依赖库(如果你对CocoaPods不熟,这有你需要的教程].运行命令行pod install来获取依赖库,确保你会看到以下输出:
$ pod install
Analyzing dependencies
Downloading dependencies
Installing LinqToObjectiveC (2.0.0)
Installing ReactiveCocoa (2.1.8)
Installing SDWebImage (3.6)
Installing objectiveflickr (2.0.4)
Generating Pods project
Integrating client project
你将会学到这些库的很多用法.
初始项目已经用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的子类.
打开此文件的头文件,添加如下属性:
@interface RWTFlickrSearchViewModel : NSObject
@property (strong, nonatomic) NSString *searchText;
@property (strong, nonatomic) NSString *title;
@end
SearchText属性为text field里面输入的文字,title属性为navigation bar上的title.
打开RWTFlickrSearchViewModel.m添加如下代码:
@implementation RWTFlickrSearchViewModel
- (instancetype)init {
self = [super init];
if (self) {
[self initialize];
}
return self;
}
- (void)initialize {
self.searchText = @"search text";
self.title = @"Flickr Search";
}
@end
以上代码用来进行ViewModel的初始化.
接下来将ViewModel和View连接.要记得View拥有对ViewModel的引用.当前给出的是相应ViewModel模型的View的初始化.
在RWTFlickrSearchViewController.h里导入ViewModel的头文件:
#import "RWTFlickrSearchViewModel.h"
接着添加初始化方法:
@interface RWTFlickrSearchViewController : UIViewController
- (instancetype)initWithViewModel:(RWTFlickrSearchViewModel *)viewModel;
@end
在RWTFlickrSearchViewController.m里面添加一个私有属性来控制UI outlets:
@property (weak, nonatomic) RWTFlickrSearchViewModel *viewModel;
继而添加初始化方法:
- (instancetype)initWithViewModel:(RWTFlickrSearchViewModel *)viewModel {
self = [super init];
if (self) {
_viewModel = viewModel;
}
return self;
}
这将存储一个View对ViewModel的引用.
在viewDidLoad的底部增加:
[self bindViewModel];
然后实现以下方法:
- (void)bindViewModel {
self.title = self.viewModel.title;
self.searchTextField.text = self.viewModel.searchText;
}
上面的代码当UI初始化和ViewModel状态给View是调用.
最后是创建个ViewModel的实例以供View使用.
在RWTAppDelegate.m增加如下导入:
#import "RWTFlickrSearchViewModel.h"
添加一个私有属性:
@property (strong, nonatomic) RWTFlickrSearchViewModel *viewModel;
你会发现这个类已经有个方法createInitialViewController,更新它的实现代码:
- (UIViewController *)createInitialViewController {
self.viewModel = [RWTFlickrSearchViewModel new];
return [[RWTFlickrSearchViewController alloc] initWithViewModel:self.viewModel];
}
以上代码用来创建一个ViewModel的新实例,继而构建和返回View.作用为初始化应用的navigation controller.
运行程序,你将看到View有一些状态!
ViewWithState-333x500.png
恭喜哦,这是你的第一个ViewModel.请克制你的兴奋,还有许多要学;]
也许你觉察到还木有用到ReactiveCocoa.当前,如果你在搜索text field输入内容将不会传递到ViewModel.
- 检测有效的搜索状态
本章节,你将使用ReactiveCocoa绑定ViewModel和View以使搜索text field和按钮能和ViewModel连接.
在RWTFlickrSearchViewController.m更新bindViewModel;
- (void)bindViewModel {
self.title = self.viewModel.title;
RAC(self.viewModel, searchText) = self.searchTextField.rac_textSignal;
}
通过ReactiveCocoa的一个category给UITextField的类添加了rac_textSignal属性.这是个text field当前文本内容更新的信号量.
RAC宏是个绑定操作,上面的代码通过rac_textSignal来监测输入的状态实时更新viewModel中的searchText属性.
简言之,就是确保seachText属性能实时反映出当前的UI状态.如果你觉得难以理解,那么最好去读读之前的两篇ReactiveCocoa tutorials!
搜索按钮只有在用户输入合法的文本时才能使用.我们设定只有在输入超过三个字符时才能进行搜索.
在RWTFlickrSearchViewModel.m里增加如下导入:
#import <ReactiveCocoa/ReactiveCocoa.h>
更新初始化方法里的内容:
- (void)initialize {
self.title = @"Flickr Search";
RACSignal *validSearchSignal =
[[RACObserve(self, searchText)
map:^id(NSString *text) {
return @(text.length > 3);
}]
distinctUntilChanged];
[validSearchSignal subscribeNext:^(id x) {
NSLog(@"search text is valid %@", x);
}];
}
运行程序,在text field里持续输入内容.你将从日志中看到text在合法和不合法状态间改变:
2014-05-27 18:03:26.299 RWTFlickrSearch[13392:70b] search text is valid 0
2014-05-27 18:03:28.379 RWTFlickrSearch[13392:70b] search text is valid 1
2014-05-27 18:03:29.811 RWTFlickrSearch[13392:70b] search text is valid 0
上面的代码使用RACObserve宏在ViewModel中的searchText属性创建一个信号量(这就是ReactiveCocoa对KVO的包装).一个map操作将text转换为真假值.
最后distinctUnitlChanges使信号量只有在值状态改变时发出.
截止现在你看到的是用ReactiveCocoa将View绑定到ViewModel,使之得到同步.另外,ReactiveCocoa经常在ViewModel里来监测它本身状态来进行其它操作.
这种类型贯穿本MVVM教程.ReactiveCocoa用来绑定View和ViewModel,但在应用其它layers里也会有用.
- 增加一个搜索指令
本章节,你将使用validSearchSignal做更多事情:创建一个绑定View的指令.
在RWTFlickrSearchViewModel.h增加如下导入:
#import <ReactiveCocoa/ReactiveCocoa.h>
添加属性:
@property (strong, nonatomic) RACCommand *executeSearch;
RACCommand是ReactiveCocoa中呈现UI动作的组件.它包含一个来表示UI动作结果、当前状态、标明动作是否被执行的信号量.
在RWTFlickrSearchViewModel.m里的initialize方法的尾部增加:
self.executeSearch =
[[RACCommand alloc] initWithEnabled:validSearchSignal
signalBlock:^RACSignal *(id input) {
return [self executeSearchSignal];
}];
当validSearchSignal为真时创建的指令为可用.
接着添加如下方法来提供创建执行指令的信号量:
- (RACSignal *)executeSearchSignal {
return [[[[RACSignal empty]
logAll]
delay:2.0]
logAll];
}
在这个方法中将执行一些业务逻辑作为执行命令的结果,并会通过信号异步地返回结果.
目前只完成了一个虚拟的执行情况;空信号立即完成.延迟操作增加了完成事件返回后的两秒延迟.用来使代码看起来更加真实.
最后一步为将这个指令添加到View中.打开RWTFlickrSearchViewController.m在bindViewModel方法的尾部添加:
self.searchButton.rac_command = self.viewModel.executeSearch;
上面的rac_command属性为ReactiveCocoa给UIButton添加的扩展.用来确保button点击后指定的命令执行,并且按钮的可用状态反应了命令的可用状态.
运行,输入一些文本,点击Go:
GoButtonEnabled-333x500.png
你会看到按钮只有在输入文本大于三个字符时才可用.而且当年你点击按钮后两秒内不可用,当执行完信号量的时候才又变得可用了. 在console里,你将看到空信号量立即完成,两秒后延迟操作执行:
09:31:25.728 RWTFlickrSearch ... name: +empty completed
09:31:27.730 RWTFlickrSearch ... name: [+empty] -delay: 2.0 completed
是不是超酷？
Girl学iOS100天 第17天
