- MVVM和数据绑定
MVVM模式依赖于数据绑定,能自动将对象属性和UI controls相联系是其框架级的特性.
举个例子,在微软的WPF框架里,ViewModel将TextField里的Text属性和Username属性绑定,如下所示:
|
1 |
<TextField Text=”{DataBinding Path=Username, Mode=TwoWay}”/> |
WPF框架将两个属性绑定在一起.
TwoWay绑定确保ViewModel中的Username属性改变时会为TextField的Text属性改变做准备,而且可逆.例如用户输入时ViewModel的变化.
另一个例子是著名的基于MVVM的网页框架Knockout,你可以在动作里看到相似的绑定特性:
|
1 |
<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来获取依赖库,确保你会看到以下输出:
|
1 2 3 4 5 6 7 8 9 |
$ 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的子类.
打开此文件的头文件,添加如下属性:
|
1 2 3 4 5 6 |
@interface RWTFlickrSearchViewModel : NSObject @property (strong, nonatomic) NSString *searchText; @property (strong, nonatomic) NSString *title; @end |
SearchText属性为text field里面输入的文字,title属性为navigation bar上的title.
打开RWTFlickrSearchViewModel.m添加如下代码:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@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的头文件:
|
1 |
#import "RWTFlickrSearchViewModel.h" |
|
1 2 3 |
@interface RWTFlickrSearchViewController : UIViewController - (instancetype)initWithViewModel:(RWTFlickrSearchViewModel *)viewModel; @end |
在RWTFlickrSearchViewass="crayon-h"> *)viewModel;
