Testing ko components

by Dejan Vasic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div id='app'>
<find-tickets params='{eventId: 100, eventName: "hello"}'></find-tickets>
</div>

JavaScript

function Ticket(ticketData){
	var me = this;
  me.ticketName = ko.observable(ticketData.ticketName);
  me.quantity = ko.observable(ticketData.quantity || 0);
}

ko.components.register("ticket-selection", {
	viewModel: function(params){
    return params.ticket;
  },
  template: '<div>Ticket <input type="text" data-bind="value: quantity" /> </div>'
});

ko.components.register("find-tickets", {
	viewModel : function(params){
  	var me = this;
    me.eventId = ko.observable(params.eventId);
    me.eventName = ko.observable(params.eventName);
    me.tickets = ko.observableArray([
    	new Ticket({ticketName : 'Free'}),
      new Ticket({ticketName : 'Premium'}),
      new Ticket({ticketName : 'Gold'})
    ]);
  },
  template: "<div>Select your tickets for <span data-bind='text: eventName'></span> <div data-bind='foreach: tickets'><ticket-selection params='ticket: $data'></ticket-selection> </div></div>"
});

ko.applyBindings();