Book Tickets screen

The final screen in our Movie Tickets app's ticketing workflow is the Book Tickets screen, where users can select and purchase tickets for both adults and children. Both ticket types will have add and subtract buttons, in the form of icons with a plus (+) and minus (-) symbol, bound by Kendo MVVM bindings, which will add and subtract the number of tickets for each type, display the total amount for each section as well as update the grand total.

Purchase is completed by clicking on the Purchase button which will send the ticket details to the service.

JavaScript module

Let's create a file called book-tickets.js in the js folder and add a JS module named MovieTickets.bookTickets, as shown in the following code, in the file:

MovieTickets.bookTickets = (function () {

    var viewModel = kendo.observable({

        //method to increment no of child tickets
        incrementChildTicket: function () {

            this.set("noChildTickets", parseInt(
                        this...