http://stackoverflow.com/questions/43179984/how-to-carry-the-data-from-one-viewmodel-to-another-viewmodel-knockout-js%22

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div class="Employee-view" data-role="view" id="employee">
  <div data-role="content">
    <ul>
      <li data-bind="foreach:EmployeeData">
        <!--Onlcick of this need to navigate to Department view and bind all values on particular Employee ID-->
        <div data-bind="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>

<!--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>

JavaScript

var serverUrl = '/echo/json';

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

function EmployeeDetailsViewModel() {
  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 = function(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();
    }

  } //employeeViewModel

  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 Model
  function DepartmentDetailsViewModel() {
    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: '/echo/json',
          data: {json: '{DeptID: 1, DeptName: "Information Technology"}'},
          success: function(data) {
            self.DepartmentData($.map(data, function(item) {
              return new DepartmentModel(item);
            }));
          }
      });
    }
  }

  function...