Theaters list screen

Once the user selects a movie by tapping on the item in the Movie list screen, the user is redirected to the Theater list screen where a list of theaters with addresses and showtimings is displayed.

The JavaScript module

Let's start building this screen by creating the JavaScript module with ViewModel for the view and associated methods. Create a file called theaters-movie-list.js in the js folder and add its reference in the index.html file. The design of the module is similar to that of the Movies list screen:

MovieTickets.theaterListForMovie = (function () {

    //ViewModel to be bound to the view
    var viewModel = kendo.observable({
        theaterList: {},
        selectedMovie: {
            movieId: "",
            movieName: "",
            rating: "",
            imageUrl:""
        },
        selectedDate: ""

    });

    //retrieve list of theaters from the service
    function getTheaterList(movieId) {
        var serviceOptions = 
            {
      ...