knockout.js making change in viewmodel2 from viewmodel1 on button click

Question

This is my code

<h4>View Model 1 </h4>
<div data-bind="with: viewModel1">   
    <input data-bind="value: messageForVM2" />
    <button data-bind="click:abc">btn</button>
</div>

<h4>View Model 2</h4>
<div data-bind="with: viewModel2">
    <p data-bind="text:message">
    </p>

     <p data-bind="text:message2">
    </p>
</div>

this is the viewmodel

var shouter = new ko.subscribable();    
var viewModel1 = function()
{   
    this.firstName = ko.observable("Wrapcode");
    this.messageForVM2 = ko.observable("Hello from first view model");
    this.messageForVM2.subscribe(function(newValue) {
        shouter.notifySubscribers(newValue, "messageToPublish");
    });
    this.message = ko.observable("Hello this is vm1");

    this.abc= function ()
    {
         alert("abc"); 
    };
};

var viewModel2 = function(vm1){
    this.message = ko.observable("Start typing message in input box above");
    shouter.subscribe(function(newValue) {
        this.message(newValue);
    }, this, "messageToPublish");
};


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

ko.applyBindings(masterVM)

I have a button click event abc in viewmodel1. how can i make changes to viewmodel2's message2 via click of button in viewmodel 1.

Answer 1

First you need to provide message2 object first in ViewModel2. Then you can pass the parent object to child to get reference to it.

var viewModel1 = function(parentObject)
{   
  var self = this;
  self.parent = parentObject;
  ...
  ...
  this.abc = function () {
    self.parent.viewModel2.message2("Change the message from ViewModel1")
  };
};

var viewModel2 = function(vm1){
  this.message2 = ko.observable("");
  ...
};

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

ko.applyBindings(masterVM)

Here is a sample

 function viewModel1(parentObject) { var self = this; self.parent = parentObject; self.total = ko.observable(0); self.clickAction = function() { self.total(self.total() + 1); self.parent.viewModel2.message(self.total() + "x modified from ViewModel1"); }; } function viewModel2() { var self = this; self.message = ko.observable("Default message of ViewModel2"); } function viewModel() { var self = this; self.viewModel1 = new viewModel1(self); self.viewModel2 = new viewModel2(); } ko.applyBindings(new viewModel()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="with: viewModel1"> <button data-bind="click:clickAction">Modify ViewModel2 message!</button> </div> <div data-bind="with: viewModel2"> <div>Message:</div> <div data-bind="text: message"></div> </div>