Make Knockout.JS subscribale globally available - asp.net

Question

I have an ASP.NET application and i am using Knockout JS for some minimal Tasks in my application. However i have some EditorTemplates that are calculating values to display. I want access to this values from some other EditorTemplates. I thought i might use the native pub/sub functionality with Knockout, meaning i would write in one EditorTemplate the notification code, like so:
new ko.subscribable().notifySubscribers(this.calculatedValue, "customTopic");
and then receive this value when it changes in my other EditorTemplate
new ko.subscribable().subscribe(function (newValue) {
alert(newValue);
}, this, "customTopic");
Of course, this code wont work, as i am creating a new ko.subscribable() everytime.
How can i create a single ko.subscribable that is available in all my Views?

Answer 1

First you need to define a new instance of subscribable variable globally.
Inside other sub view models subscribe to subscribable variable that you defined.
Notify any subscribers by using notifySubscribers whenever any updates happens.
Example : https://jsfiddle.net/kyr6w2x3/149/
View:
<div id="one">
<h1>MainVM:</h1>
<input type="text" data-bind="textInput:Name">
<hr>
</div>
//-------------------------------------------------
<div id="two">
<h1>SecondVM:</h1>
<div data-bind="text:NameSecondVM"> </div>
</div>
Model:
var shouterValueOfName = new ko.subscribable();
<script type="text/javascript">
var MainViewModel = function(){
var self = this;
self.Name = ko.observable();
self.Name.subscribe(function (newValue) {
newValue = newValue ? newValue + " Sent from MainVM" : "" ;
shouterValueOfName.notifySubscribers(newValue, "secondVMTakeThis");
}, self);
}
</script>
<script type="text/javascript">
var SecondViewModel = function(){
var self = this;
self.SecondVM = ko.observable();
self.NameSecondVM = ko.observable();
shouterValueOfName.subscribe(function (newValue) {
self.NameSecondVM(newValue);
}, this, "secondVMTakeThis");
}
</script>
var viewModelA = new MainViewModel();
var viewModelB = new SecondViewModel();
ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));