JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<script src="https://rawgit.com/rniemeyer/knockout-postbox/master/build/knockout-postbox.js"></script>
<div id="one">
    <ul data-bind="foreach: items">
        <li data-bind="text: id + ' ' + name"></li>
    </ul>
</div>

<hr/>

<div id="two">
    Id to match: <input data-bind="value: id, valueUpdate: 'afterkeydown'" /><hr/>

    <div data-bind="with: item">
        <div data-bind="text: id + ' ' + name"></div>
    </div>
</div>

JavaScript

var ViewModelOne = function() {
    this.items = ko.observableArray([
        { id: "1", name: "one" },
        { id: "2", name: "two" },
        { id: "3", name: "three" }
    ]);
    
    this.getItemById = function(id) {
        return id && ko.utils.arrayFirst(this.items(), function(item) {
            return item.id === id
        });
    };
    
    //listen for requests
    ko.postbox.subscribe("item.request", function(id) {
        //publish a response
        ko.postbox.publish("item.response", this.getItemById(id));
    }, this);
};

var ViewModelTwo = function() {
    this.id = ko.observable().publishOn("item.request");
    this.item = ko.observable().subscribeTo("item.response");
};

ko.applyBindings(new ViewModelOne(), document.getElementById("one"));
ko.applyBindings(new ViewModelTwo(), document.getElementById("two"));