kockout-postbox demo

Trying to get inter-communication between components

by Dejan Vasic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-postbox/0.6.0/knockout-postbox.min.js"></script>
<div>
  <ticket-selector></ticket-selector>
  <seat-selector></seat-selector>
</div>

JavaScript

const TOPICS = {
	SELECT_TICKET : "selectedTicketTopic"
};

ko.components.register('seat-selector', {
	viewModel: function(params){
  	this.ticketType = ko.observable().subscribeTo(TOPICS.SELECT_TICKET);
    var me = this;
    this.ticketName = ko.computed(function(){
    	if(me.ticketType()){
				return me.ticketType().ticketName;
      }
    	return null;
    });
  },
  template: '<div>Ticket: <span data-bind="text: ticketName"></span> </div>'
});

ko.components.register('ticket-selector', {
	viewModel: function(params){
  	this.tickets = ko.observableArray();
    this.tickets.push({
    	ticketName: 'General Admission'
    });
    
    this.tickets.push({
    	ticketName: 'VIP'
    });
    
    this.selectedTicket = ko.observable().publishOn(TOPICS.SELECT_TICKET);
    var me = this;
    this.onTicketSelected= function(model){
    	me.selectedTicket(model);
    }
  },
  template: "<div data-bind='foreach: tickets'><button class='btn btn-default' data-bind='text: ticketName, click: $parent.onTicketSelected'></button> <br></div>"
});

ko.applyBindings();