CODEWITHSUNDEEP
javascriptasp.net-mvcknockout.js
maztt
maztt

Reputation: 12294

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

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.

Upvotes: 0

Views: 33

Answers (1)

muhihsan
muhihsan

Reputation: 2350

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>

Upvotes: 1

Related Questions