f.html

<script>
        var TicketViewModel = function(tickets){ // must be ko-friendly tickets
            var self = this;
            self.tickets = tickets 

            this.next = function(){
                // How can we let other views subscribe to this method?
                console.log(JSON.stringify(ko.toJS(self.tickets)));
            }

        }

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

            self.save = function(){
                console.log(JSON.stringify(ko.toJS({ 'name': self.name, 'email': self.email })));
            }
        }

        var GuestRow = function(ticket){
            var self = this;
            self.ticket_id = ko.observable(ticket.id);
            self.ticket_name = ko.observable(ticket.name);
            self.guest_names = ko.observableArray([]);

            ticket.desired_quantity.subscribe(function(new_num) {
                self.guest_names([]);
                for(i=0; i < new_num; i++) {
                    self.guest_names.push({name: ''});
                }
            });
        }

        var GuestList = function(){ // ko-friendly tickets only

            var self = this;
            self.guests = ko.observableArray([]);

            self.add = function(ticket){
                self.guests.push(new GuestRow(ticket));
            }

            self.save = function(){
                console.log(JSON.stringify(ko.toJS(self.guests)));
            }
        }

        var Event = Backbone.Model.extend({ 
            url: function(){ return '/api/v1/event/' + this.id + '/?format=json'},
            //parse: function(response) {
            // return response.objects;
            //}
        });
        the_event = new Event({ id:  $('#event_id').val() });
        the_event.fetch({success: function(){
            //var tickets = the_event.get('tickets');
            var tickets = ko.observableArray(ko.utils.arrayMap(the_event.get('tickets'), function(ticket) {
                                return { ticket_id: ticket.ticket_id, price: ticket.price, quantity: ticket.quantity, name: ticket.name, desired_quantity: ko.observable(0) };
                                            }))


            var guestlist = new GuestList();
            for(i=0; i<tickets.length; i++){
                guestlist.add(tickets[i]);
            }
            var viewModels = {
                ticketViewModel: new TicketViewModel(tickets),
                'guestlist': guestlist,
                personalDetailsViewModel: new PersonalDetailsViewModel()
            }
            ko.applyBindings(viewModels);
        }});
</script>

    <div id="ticket-table-wrap" data-bind="with: ticketViewModel">
        <table id="ticket-table">
            <thead>
                <tr>
                    <th class="text-left">Ticket Type</th><th class="text-right">Remaining</th><th class="text-right">Price</th><th class="text-right last">Quantity</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: tickets">
                {% for ticket in event.ticket_set.all %}
                <tr class="server-generated">
                    <td class="text-left">{{ ticket.name }}</td>
                    <td class="text-right">{{ ticket.remaning }}</td>
                    <td class="text-right">{{ ticket.price }}</td>
                    <td class="text-right last"><input type="text" class="ticket-qty" name="qty-{{ ticket.id }}" value="0" data-ticket-name="{{ ticket.name }}" /></td>
                </tr>
                {% endfor %}
                <tr>
                    <td class="text-left" data-bind="text: name"></td>
                    <td class="text-right" data-bind="text: quantity"></td>
                    <td class="text-right" data-bind="text: price"></td>
                    <td class="text-right last">
                        <input type="text" class="ticket-qty" 
                        data-bind="value: desired_quantity" />
                    </td>
                </tr>
            </tbody>
        </table>
        <button type="submit" name="buy" id="buy" data-bind="click: next" /><span>Buy Now</span></button>
    </div>
</form>

<div id="booking-personal-details" style="clear: both;">
    <fieldset class="your-details">
        <h3>Your Details</h3>
        <input type="text" data-bind="value: personalDetailsViewModel.name" class="required" />
        <input type="text" data-bind="value: personalDetailsViewModel.email" class="required email" />
    </fieldset>
</div>

<div id="guests" data-bind="with: guestlist" style="clear: both;">
    <ul data-bind="foreach: guests" style="clear: both;">
        <li><span data-bind="text: ticket_name"> </span> <span data-bind="text: desired_quantity"></span>
            <ul data-bind="foreach: guest_names">
                <li><input data-bind='value: guest_name' /> Guest</li>
            </ul>
        </li>
    </ul>
    <button data-bind="click: save">Save</button>
</div>