JSFiddle - React, Tailwind, and code Playground
HTML
<ul data-bind="foreach: customers">
<li>
<span data-bind="text: name"></span>
<button data-bind="click: remove">Remove</button>
</li>
</ul>
JavaScript
(function (MyApp) {
MyApp.EventAggregator = function () {
};
MyApp.EventAggregator.prototype = function () {
function getSubscribers(message, isInstance) {
var constructor = isInstance ? message.constructor : message;
if (constructor.__subscribers === undefined) {
constructor.__subscribers = [];
}
return constructor.__subscribers;
}
return {
unsubscribe: function (context) {
ko.utils.arrayForEach(context.__subscribedMessages, function (m) {
var index = -1;
for (var j = 0; j < m.__subscribers.length; j++) {
if (m.__subscribers[j].context == context) {
index = j;
break;
}
}
if (index != -1) {
m.__subscribers.splice(index, 1);
}
});
},
subscribe: function (type, handler, context) {
if (context.__subscribedMessages === undefined) {
context.__subscribedMessages = [];
}
context.__subscribedMessages.push(type);
var subscribers = getSubscribers.call(this, type, false);
subscribers.push({ handler: handler, context: context });
},
publish: function (message) {
var subscribers = getSubscribers.call(this, message, true);
ko.utils.arrayForEach(subscribers, function (subscriber) {
subscriber.handler.call(subscriber.context, message);
});
}
};
} ();
})(window.MyApp = window.MyApp || {});
//Global event aggregator, can also create local ones
MyApp.eventAggregator = new MyApp.EventAggregator();
MyApp.DeleteCustomerMessage = function(customer) {
this.customer =...