JSFiddle - React, Tailwind, and code Playground

by Rahul Patil

HTML

<script src="https://rawgit.com/rniemeyer/knockout-postbox/master/src/knockout-postbox.js"></script>
   <div id="container1">
        <ul >
            <span data-bind="text: isVisible"></span>
            <li >Container1 item</li>
            <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
        <button data-bind="click:showDiv">show another div</button>
    </div>
     <div id="container2" data-bind="visible:isVisible">
        <ul>
            <li >Container2 item</li>
            <!-- ko foreach: myItems -->
                <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

JavaScript

function Container1ViewModel()
{
    var self = this;
    self.isVisible = ko.observable(false).publishOn("showDiv");
    self.showDiv = function(){
         if(self.isVisible())
             self.isVisible(false);
        else
            self.isVisible(true);
    }

    self.myItems = ko.observableArray();
    self.myItems.push("ABC");
    self.myItems.push("CDE");

} 
function Container2ViewModel() {
    var self = this;
    self.isVisible = ko.observable().subscribeTo("showDiv", true);;
    self.myItems = ko.observableArray();
    self.myItems.push("XYZ");
    self.myItems.push("PQR");

}


var container1VM;
var container2VM;

        container1VM = new Container1ViewModel();
        ko.applyBindings(container1VM, document.getElementById("container1"));

        container2VM = new Container2ViewModel();
        ko.applyBindings(container2VM, document.getElementById("container2"));