How to carry the data from one viewModel to another ViewModel Knockout JS

Question

I am using the Knockout js in my single page Application,I need to carry the value of one viewmodel data to another viewModel data,So i can reduce my duplication creating same view, How i can achieve this below is my code.I got 2 different js file,which one consist of Employee ViewModel and in another Department View Model

   //Employee View
<div class="Employee-view"  data-role="view" id="employee">
  <div data-role="content" >
  <ul>
  <li foreach:EmployeeData>

      //Onlcick of this need to navigate to  Department view and bind all values on particular Employee ID 
     <div databind:"click:GetDepartmentDetails">
      <span data-bind:"text:EmployeeId"> <span>
      <span data-bind:"text:EmployeeName"> <span>
      <span data-bind:"text:EmployeeImage"> <span>
     <div> 
  <li>
 <ul>
</div>
</div>


 EmployeeViewModel = new EmployeeDetailsViewModel();;
  $(".Employee-view").each(function () {
    ko.applyBindings(EmployeeViewModel, $(this).get(0));
  });


 function EmployeeViewModel()
   {
    var self=this;
    self.EmployeeData = ko.observableArray([]);

   self.GetEmployee=function(UserName,Password){  

   var UserModel = { UserName: UserName, Password: Password}
     $.ajax({
            type: "POST",
            dataType: "json",
            url: serverUrl + 'xxx/xxx/GetEmployee',
            data: UserModel,
            success: function (data) {
            self.EmployeeData($.map(data, function (item) {
            return new EmployeeModel(item);
           })),
         });}

        //Click EVENT
         self.GetDepartmentDetails=(EmployeeData)
        {
          // I am getting all the value in this ViewModel,I need to pass   this value to DepartmentViewModel  and i need to call the function  
        self.GetEmployeeByDepartment();
        }

    }

  function EmployeeModel(data)
  {
       var self=this;
       self.EmployeeId=ko.observable(data.EmployeeId)
       self.EmployeeName=ko.observable(data.EmployeeName)
       self.EmployeeImage=ko.observable(data.EmployeeImage)
  }

 //Department View
 <div class="Department-view" data-role="view" id="Department">
  <div data-role="content">
  <ul>
  <li   data-bind:"foreach:DepartmentData ">
     <div>
      <span data-bind:"text:DeptId"> <span>
      <span data-bind:"text:DeptName"> <span>
     <div> 
  <li>
 <ul>
</div>
</div>

  //Department View Model
   function DepartmentViewModel ()
   {
    var self=this;
    self.DepartmentData = ko.observableArray([]);

  self.GetEmployeeByDepartment=function(item){  
       employeeID=item.EmployeeId
       employeename=item.Employeename
  var DeptModel = { Employeename: employeeID, Employeename: employeename}
    $.ajax({
            type: "POST",
            dataType: "json",
            url: serverUrl + 'xxx/xxx/GetDepratmenDetails',
            data: DeptModel ,
            success: function (data) {
            self.DepartmentData ($.map(data, function (item) {
            return new DepartmentModel(item);
           })),
         });}}
}

 function DepartmentModel(data)
  {
       var self=this;
       self.DeptId=ko.observable(data.DeptID)
       self.DeptName=ko.observable(data.DeptName)
  }

 DepartmentViewModel = new DepartmentDetailsViewModel();
  $(".Department-view").each(function () {
    ko.applyBindings(DepartmentViewModel, $(this).get(0));
  });

I tried to create a sample using your code above but there are just too many syntax errors to tell what the code is supposed to do. Can you clean it up a bit? If you can create a working example with a jsfiddle or similar that would be helpful. — Jason Spake
I have two js file in which one file consist of EmployeeViewModel and another with DepartmentViewModel. On page load i am getting all the value for EmployeeViewModel and DepartmentViewModel. Now after binding,I have data-bind:"click:GetDepartmentDetails" this click event is in EmployeeViewModel ,when i click this, i need to take EmployeeData observablearry to another DepartmentViewModel, so i can get particular user Deprtament — kitty sarvaj

Joonas89 Joonas89 · Accepted Answer · 2017-04-20T09:45:38

You could try to gather ur instanced view models in an object, then run applybindings on this object. You would have to rescope the stuff u already have binded. But with this you should be able to cross reference between the models by accessing for instance vm.EmployeeViewModel.SomeFunction()

var vm = {};
vm.EmployeeViewModel = new EmployeeViewModel();
vm.DepartmentViewModel = new DepartmentViewModel();
ko.applyBindings(vm);

How to carry the data from one viewModel to another ViewModel Knockout JS

2 Answers