MVVM与ReactiveCocoa的运用(Part1)

• 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吧.

• 开始项目架构

首先下载一下初始项目:

• FlickrSearchStarterProject

项目用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

是不是超酷？

原文链接：http://www.jianshu.com/p/b2fe0920e3aa