MULTIPLE ViewModels communicating

Denne må jeg studere litt nærmere.

by Asle Gundersby

HTML

<h4>View Model 1 </h4>
<div data-bind="with: viewModel1">
    <p data-bind="text:message">
    </p>
    <input data-bind="value: messageForVM2, valueUpdate:'afterkeydown'" /><br>
    <select data-bind="options:Projects,optionsText: 'title', value: selectedProject"></select>
    <span data-bind="text: selectedProject().users.length + ' assigned to project'"></span>
    <ul data-bind="foreach: selectedProject().users">
        <li data-bind="text: name"></li>
    </ul>
</div>
<hr><hr>
<h4>View Model 2</h4>
<div data-bind="with: viewModel2">
    <p data-bind="text:message">
    </p>
</div>

JavaScript

var shouter = new ko.subscribable();

var Project = function(data){
    var self = this;
    self.ID = data.ID;
    self.title = ko.observable(data.title);
    
    self.users = ko.observableArray();
};

var User = function(data){
    var self = this;
    self.ID = data.ID;
    self.name = ko.observable(data.name);
    
    self.users = ko.observableArray();
};

var viewModel1 = function(){
    var self = this;
    self.message = ko.observable("Hei dette er vm1");
      
    self.Projects = ko.observableArray();
    self.Projects.push(new Project({
            ID: 1, 
            title: 'First'
        }));
    self.Projects.push(new Project({
            ID: 2, 
            title: 'Second'
        }));
    
    self.selectedProject = ko.observable();
    
    //this.firstName = ko.observable("Wrapcode"); 
    self.messageForVM2 = ko.observable("Hello from first view model");
    self.messageForVM2.subscribe(function(newValue) {
        shouter.notifySubscribers(newValue, "messageToPublish");
    });
  
};

var viewModel2 = function(vm1){
    var self = this;
    self.message = ko.observable("Start typing message in input box above");
    
    self.Users = ko.observableArray();
    self.Users.push(new User({
        ID: 1,
        name: 'Anders'
    }));
    self.Users.push(new User({
        ID: 2,
        name: 'Asle'
    }));
    self.selectedUser = ko.observable();
    
    shouter.subscribe(function(newValue) {
        self.message(newValue);
    }, self, "messageToPublish");
};


var masterVM = (function(){
    var self = this;
    self.viewModel1 =  new viewModel1(),
    self.viewModel2 = new viewModel2();
})();

ko.applyBindings(masterVM)