KO topic pub-sub

Publish & Subscribe to "message" with specific topic

by Jorge Bustos Pereda

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-debug.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<b>Model1 - subs name subscribed to name change</b>
<pre id='model1'>
    Name:
    <input type="text" data-bind="value: name"/>
    SubsName: <!-- ko text: subsName --><!-- /ko -->
</pre>

<b>Model2 - subscribe to model 1 name change</b>
<pre id='model2'>
    SubsName: <!-- ko text: subsName --><!-- /ko -->
</pre>

CSS

body * {
    font-family: Arial, Helvetica;
    margin: 0;
    padding: 3px;
}
pre {
    border: solid 1px #CCC;
    background-color: #eee;
    font-family: Consolas, Monospace, Courier New;
    font-size: 10pt;
}

JavaScript

var vm1 = {
    name: ko.observable('Pepe'),
    subsName: ko.observable()
};

vm1.name.subscribe(function(){
    //alert('changed!');
    vm1.name.notifySubscribers(vm1.name(), 'changedName');
});

vm1.name.subscribe(function(name) {
    //alert('Received!');
    vm1.subsName('Name changed to ' + name);
}, vm1, 'changedName');


// The model 2 needs knowledge of the model 1 to
// be able to subscribe to it
// Use knocokut-postbox to decouple

var vm2 = {
    subsName: ko.observable()
};

vm1.name.subscribe(function(name) {
    vm2.subsName('Name changed to ' + name);
}, vm2, 'changedName');

var e1 = document.getElementById('model1');
var e2 = document.getElementById('model2');

ko.applyBindings(vm1, e1);
ko.applyBindings(vm2, e2);