JSFiddle - React, Tailwind, and code Playground

by nveron

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<comp1 params="{app: $data}"></comp1><br/>
<comp2 params="{app: $data}"></comp2><br/>
<notif params="{app: $data}"></notif>

JavaScript

var VM = function()
{
    var self = this;
    
    this._notifications = ko.observableArray([]);
    this.notifications = {
        addInfo: function(text){
            self._notifications.push(text);
        }
    }
}

var comp1 = function(params) {
    var app = params.app;
           
    this.addToNotif = function(){
        app.notifications.addInfo("comp1 was here");
    }
}

var comp2 = function(params) {
    var app = params.app;
    
    this.addToNotif = function(){
        app.notifications.addInfo("comp2 also");
    }    
}

var notif = function(params){
    this.notifs = params.app._notifications;
}


var comp1VM = { viewModel: comp1, template: '<button data-bind="click:addToNotif">Add notification from comp1</button>' };

var comp2VM = { viewModel: comp2, template: '<button data-bind="click:addToNotif">Add notification from comp2</button>' };

var notifVM = { viewModel: notif, template: '<ul data-bind="foreach: notifs"><li data-bind="text: $data"></li></ul>' };

ko.components.register('comp1', comp1VM);
ko.components.register('comp2', comp2VM);
ko.components.register('notif', notifVM);
ko.applyBindings(new VM());