j.js

$(function(){
    ko.bindingHandlers.disableAndThrob = {
        init: function(element, valueAccessor) {
            if (valueAccessor()){
                var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
                if(valueUnwrapped){
                    $(element).attr('disabled', 'disabled');
                    $(element).before('<img src="/assets/images/loading.gif" width="16" height="16" class="loading-throbber">');
                }
 
            }
        },

        update: function(element, valueAccessor){
                var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
                if(valueUnwrapped){
                    $(element).attr('disabled', 'disabled');
                    $(element).before('<img src="/assets/images/loading.gif" width="16" height="16" class="loading-throbber">');
                }
         }
    }

    function Guest(){
        this.name = ko.observable('');
    }

    var EventVm = function (the_event){
        var self = this;
        self.id = ko.observable(the_event.get('id'));
        self.name = ko.observable(the_event.get('name'));
        self.start_date_raw = ko.observable(the_event.get('start_date'));
        self.organiser = ko.observable(the_event.get('organiser').name);

        self.start_date = ko.computed(function(){ 
            var m = moment(self.start_date_raw(), 'YYYY-MM-DD');
            return m.format("dddd D MMMM YYYY");
        })

    }

    var PersonalDetails = function(ticketTypes){
        var self = this;
        self.ticketTypes = ticketTypes;
        self.name = ko.observable('');
        self.email = ko.observable('');

    }

    function TicketType(type) {
        var self = this;
        this.ticket_id = type.id;
        this.name = type.name;
        this.price = type.price;
        this.quantity = type.quantity;

       
        this.numGuests = ko.observable(0);
        this.guests = ko.observableArray();
        
        this.hasGuests = ko.computed(function(){
            return (self.numGuests() > 0) ? true : false;
        });

        this.removeGuest = function(guest){
            self.guests.remove(guest);
        }
        this.numGuests.subscribe(function(num) {
            var currNum = self.guests().length;
            if (num >  currNum) {
                for (var i = currNum; i < num; i++) {
                    self.guests.push( new Guest() );
                }
            }
            else if (num < currNum) {
                self.guests.splice(num, currNum - num);
            }            
        });
    }

    function VM() {
        var self = this;

        self.saving = ko.observable(false);
        
        self.loadTypes = function(types) {
            self.ticketTypes([]);
            self.ticketTypes( ko.utils.arrayMap(types, function(ticketType) {
                return new TicketType(ticketType);
            }));
        }        
        
        self.ticketTypes = ko.observableArray();

        self.the_event = ko.observable();
        self.loadEvent = function(the_event){
            self.the_event( new EventVm(the_event) );
        }
        
        self.steps = ko.observableArray([
                { 
                    template: function(){ return 'ticket_types' }, 
                    model: self.ticketTypes,
                    fullWidth: function(){ return true; }
                },
                { 
                    template: function(){ return 'personal_details_template' },
                    model: new PersonalDetails(self.ticketTypes),
                    fullWidth: function(){ return false; }
                },
                { 
                    template: function(){ return 'ticket_guests' }, 
                    model: self.ticketTypes,
                    fullWidth: function(){ return false; }
                },
        ]);

       
        self.currentStep = ko.observable(self.steps()[0]);

        self.currentIndex = ko.computed(function(){
            return _.indexOf(self.steps(), self.currentStep());
        });

        self.goNext = function(){
            self.currentStep(self.steps()[self.currentIndex() + 1]);
        }

        self.resetAndGoNext = function(){ 
            self.currentStep(self.steps()[0]);
            self.goNext();
        }

        self.getTemplate = function(data) {
            return self.currentStep().template();   
        };

        self.canGoNext = ko.dependentObservable(function() {
            return self.currentIndex() < self.steps().length - 1;
        });

        self.isLastStep = ko.computed(function() {
            return (self.currentIndex() == self.steps().length - 1) ? true : false;
        });

        self.getByTemplateName = function(template_name){
            return _.find(self.steps(), function(s){ return s.template() == template_name; })
        }

        self.save = function() {
            self.saving(true);

            $.post('/process_order_json/', { data: 
                ko.toJSON({ 
                    event_id: self.the_event().id, 
                    ticketTypes: self.getByTemplateName('ticket_types').model,
                    personalDetails: self.getByTemplateName('personal_details_template').model
                })
            }, function(data){
                if(data.success){
                    location.href=data.redirect_url
                }
            });
        }


        self.fullWidth = ko.computed(function(){
            return self.currentStep().fullWidth()
        });


    }
    
    var vm = new VM();
    
    ko.applyBindings( vm );

    var Event = Backbone.Model.extend({ 
        url: function(){ return '/api/v1/event/' + this.id + '/?format=json'},
    });


    //TODO: Refactor finder to use knockout on finder mini-app
    if($('#event_id').val()){
        var the_event = new Event({ id: $('#event_id').val() });
        the_event.fetch({success: function(){
            vm.loadEvent(the_event);
            var ticketTypesFromServer = the_event.get('tickets');
            vm.loadTypes(ticketTypesFromServer);
        }});

        $('#start-order-dialog').click(function(e){
            $('#order-dialog').modal();
        });
    }

    $('#finder').on('click', '.buy-now', function(e){
        e.preventDefault();
        var the_event = new Event({ id: $(this).parent().parent().parent().data('event-id') }); //('#event_id').val() });
        the_event.fetch({success: function(){
            vm.loadEvent(the_event);
            var ticketTypesFromServer = the_event.get('tickets');
            vm.loadTypes(ticketTypesFromServer);
        }});

        $('#order-dialog').modal();
       
    });

    $('#buy').click(function(){
        $('#order-dialog').modal();
    });

});