MVVM Architecture

      +

      The Model-View-ViewModel pattern

      In our app, we follow the MVVM pattern, which decouples the retrieval of data, view logic, and presentation into three distinct areas.

      uwp mvvm
      Figure 1. MVVM Pattern

      Model

      The model provides and stores the internal data. In our travel app, for simplicity, we use standard data types of Dictionary and Array to represent the data. In a real application, one would use a custom object to represent the model.

      The app implements the following models - Booking which represents a flight reservation - Flight which represents airline details - Airport which represents airport name - Hotel which represents hotel details

      In addition, the CouchbaseSession class is used to keep state through multiple pages.

      View

      In the Travel app, the ContentPage class represents the "view" in MVVM. It handles user input and forwards requests to the VIew Model. It updates the UI based on response from the View Model.

      The app implements the following Views - LoginPage which represents the login UI - BookmarkedHotelsPage which represents the UI that lists bookmarked hotels - FlightBookingsPage which represents the flight reservations UI - HotelsListPage which represents the UI that lists hotels - HotelDetailsPage which represents the UI that lists hotel details

      View Model

      The View Model acts as the intermediary between the View and the Model. It is responsible for interacting with the model and updating it’s state to indicate how the view should present itself. There is one view model per view and is named according to the view

      • LoginViewModel

      • BookmarkedHotelsViewModel

      • FlightBookingsViewModel

      • HotelsListViewModel

      • HotelDetailsViewModel