[RxSwift and MVVM] – Bài 2 – Mối liên hệ giữa VC và VM

1. Setup ban đầu: 

App khá đơn giản, chỉ có Text Field và Label. Edit Text Field thì Label sẽ thay đổi lập tức. Mark Outlet lại. Và ban đầu nó sẽ như sau:

Tiếp theo các bạn install RxSwift và RxCocoa framework từ pod và tạo 1 class ViewModel. Xong phần chuẩn bị, bây giờ ta đi vào phần chính. Các bạn nhớ kĩ các nguyên tắc ở bài 1, mình sẽ thực hiện theo các nguyên tắc đó.

2. View Controller truyền tín hiệu cho View Model:

1. Mình sẽ quan sát bên ViewController (VC) có bao nhiêu thành phần input rồi qua bên ViewModel (VM) khai báo bấy nhiêu Variable, hoặc PublishSubject.

1. Ta thấy app chỉ có 1 input đó là textfield nên mình sẽ khai báo bên ViewModel 1 Variable:

var inputText = Variable(“”)

2. VM sẽ nhận tín hiệu, data của Input từ VC (như là hit button, edit textfield v..v)

Bây giờ ta nhận tín hiệu bằng cách bind. Từ bind này nó nghĩa hao hao như connect.

Để mình giải thích khúc này, thứ nhất là khai báo 1 biến viewModel để bind đến các Variable trong đó. Thứ hai là disposeBag, cái này các bạn tự tìm hiểu, mình không đi sâu phần này. Thứ ba là map {$0 ?? “”}, cái rx.text nó sẽ trả về ControlProperty nên đây là 1 cách mình unwrap thằng Optional.

Dòng code .bind(to: viewModel.inputText) chính là việc mình bind nó đến thằng Variable (giai đoạn này tương tự như việc mình set Value cho nó)

Tiếp theo là công việc quen thuộc, dispose nó.

3. View Model trả tín hiệu ngược ra cho View Controller:

3. VM sau khi nhận được tín hiệu để xử lý data đó theo requirement rồi send back data đến VC bằng cách phát ra các Observable tương ứng

Tại ViewModel class, ta khai báo 1 biến để xử lý các requirement để send back lại VC. 

Mình xin giải thích 1 chút:

Khai báo 1 Observable để handle các requirement từ data ở UI rồi trả ngược lại cho VC.

Ở đây, app chỉ khá đơn giản, nhập text hiển thị text nên chưa xử lý nhiều, chỉ đơn giản là gửi text từ TextField lên Label. Ở phần sau, mình sẽ làm những app có xử lý logic code ở đoạn này.

4. View Controller bind tín hiệu đó lên UI:

4. Output ở VC sẽ subscribe những Observable mà VM cung cấp

Ở step cuối, ở VC ta sẽ subscribes những observable mà VM cung cấp. Trong phần closure onNext, ta sẽ xử lý, gắn các giá trị output tại đây, ở trong chính closure này.

Như vậy app đã xong, bây giờ các bạn run để thấy kết quả.