f.js

            var GuestView = function(){
                this.guestlist = ko.observableArray(ko.utils.arrayMap(tickets, function(ticket) {
                    return { 
                        // How do i sync up guests and tickets, and ensure that when
                        // the num_of_guests increases, new guest input fields are created?
                    }))

            }
            var TicketView = function(){
                this.tickets = ko.observableArray()
            };
            tickets = [
                    { name: 'With champers', price: '9.99', num_of_guests: ko.observable(0), guests: ko.observable(new Guests())},
                    { name: 'Meal only', price: '6.99', num_of_guests: ko.observable(0), guests: ko.observable(new Guests())}
                    ]
            ko.applyBindings(new TicketView(), document.getElementById('tickets'));
            ko.applyBindings(new GuestView(), document.getElementById('guestlist'));