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

问题

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));
  });

回答1:

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);

回答2:

This is what components are for. Have an Employee component with its own ViewModel, a Department component with its own ViewModel, and an application ViewModel that coordinates them. In general, best practice is to applyBindings once for the entire application, and let Knockout do all control of the DOM.

The way you're doing things suggests that you start with HTML that has multiple employees and departments in it, which is to say, your data is embedded in your HTML and you're expecting Knockout to extract it from there. That is not good practice. Your ViewModel should have the employee data in it and the View should reflect what is in the ViewModel.

来源：https://stackoverflow.com/questions/43179984/how-to-carry-the-data-from-one-viewmodel-to-another-viewmodel-knockout-js