Knockout.js прохождения значения ViewModels многократной страницы

Question

Я новичок в Knockout.js, у меня есть 2 ViewModel EmployeeviewModel и DepartmentViewModel, я связывание моего первый взгляда, используя EmployeeviewModel его работу идеально, теперь мне нужно сделать кнопку, так что я могу перейти к вторая страница, которая является отделом, и в frist мне нужно отобразить щелчок EmployeeName и его отдел, во-вторых, мне нужно отобразить все EmployeeName, связанные с этим отделом, как добиться этого, как я могу передать свое значение первой страницы на второй экран, связанный с departmentID ,

function EmployeeViewModel() 
    { 
    var self =this; 
    var Allemployee =ko.observableArray([]) 
    self.getEmployeedetails=function() 
    $.ajax({ 
    type: "GET", 
    dataType: "json", 
    url: baseUrl + 'xxx/xxxxxx', 
    success: function (data) { 
     self.Allemployee($.map(data, function (item) { 
       return new EmployeeModel(item); 
      })); 
    }, 
    error: function (error) { 
    } 
}); 
    self.getDepartment=function() 
    { 
     //here i need to navigate to Department page with all department ID 
     } 
} 

function EmployeeModel(data) 
{ 
    var self =this; 
    self.employeeName = ko.observable(data.employeeName) 
    self.employeeMobile= ko.observable(data.employeeMobile) 
    self.employeeemail = ko.observable(data.employeeemail) 
    self.employeedepartmentId= ko.observable(data.employeedepartmentId) 
} 

function DepartmentViewModel() 
    { 
    var self =this; 
    var AllDepartmentemployee =ko.observableArray([]) 
    self.getEmployeedetails=function() 
    $.ajax({ 
    type: "GET", 
    dataType: "json", 
    url: baseUrl + 'xxx/xxxxxx', 
    success: function (data) { 
     self.AllDepartmentemployee ($.map(data, function (item) { 
       return new DepartmentModel(item); 
      })); 
    }, 
    error: function (error) { 
    } 
}); 

} 

function DepartmentModel (item) 
{ 
    self.departmentId= ko.observable(data.departmentId) 
    self.departmentName=ko.observable(data.departmentName) 
    self.employeeName=ko.observable(data.employeeName) 
} 
    var viewModel=new EmployeeViewModel() 
    ko.applyBindings(EmployeeViewModel,document.getElementById("employeeDetails")) 

var viewModel 2=new DepartmentViewModel() 
    ko.applyBindings(viewModel,document.getElementById("department")) 


//html// 
//First view 
<div data-role="view" id="employeeDetails"> 
     <ul> 
     <li> 
      <div data-bind="text:employeeName"></div> 
      <div data-bind="text:employeeMobile"></div> 
      <div data-bind="text:employeeemail "></div> 
      <div data-bind="text:employeedepartmentId"></div> 
      <a href="#" data-bind="click:getDepartment"></a> 
     </li> 
     </ul> 
<div> 

    //second View 
    <div data-role="view" id="department"> 
     <div data-bind="text:employeeName"> 

     <div> 
     <div data-bind="text:departmentName"> 

     <div> 
     <ul data-bind:"foreach:AllDepartmentemployee"> 
     <li> 
      <div data-bind="text:employeeName"> 
      <div data-bind="text:departmentName"></div> 
     </li> 
     <ul> 
    <div> 

Answer 1

Вы должны иметь Main view model и иметь два sub view models для вашего departments и employees. Затем каждый раз, когда вы нажимаете на какого-либо сотрудника, у вас будет departmentId, тогда на основе вашей логики вы можете либо отправить запрос на сервер вместе с Id и вернуть всех сотрудников этого отдела, либо у вас уже есть все отделы, и вы просто filter их на основе departmentId, который был передан.

Ниже приведен пример, как обращаться: https://jsfiddle.net/kyr6w2x3/124/

HTML:

<div data-role="view" id="employeeDetails"> 
     <ul > 
     <li> 
      <span class="info">Name</span> 
      <span class="info">Mobile</span> 
      <span class="info">Email</span> 
      <span class="info">Dept.NO</span> 
      </li> 
      <hr> 
      <!-- ko foreach: AllEmployee --> 
      <li> 
      <span data-bind="text:EmployeeName" class="info"></span> 
      <span data-bind="text:EmployeeMobile" class="info"></span> 
      <span data-bind="text:EmployeeEmail " class="info"></span> 
      <span data-bind="text:EmployeeDepartmentId" class="info"></span> 
      <a href="#" data-bind="click:$parent.GetDepartment">Click</a> 
      </li> 
     <!-- /ko --> 
     </ul> 
<div> 

    //second View 
<div data-role="view" id="department"> 
     <h1 data-bind="text:SelectedEmployeeName"></h1> 
     <div data-bind="if:AllDepartmentEmployee().length > 0"> 
     <h3 data-bind ="text:AllDepartmentEmployee()[0].DepartmentName()"></h3> 
     </div> 
     <ul data-bind ="foreach:AllDepartmentEmployee"> 
     <li> 
      <div data-bind="text:EmployeeName"></div> 
      <!-- <div data-bind="text:DepartmentName"></div> -->   
      </li> 
     <ul> 
<div> 

VM:

var employeesList = [{ 
    employeeId : 1, 
    employeeName:"Mike" , 
    employeeMobile :1234561 , 
    employeeEmail:"Mike@example.com", 
    employeeDepartmentId:1}, 
    { 
    employeeId : 2, 
    employeeName:"Alex" , 
    employeeMobile :1234562 , 
    employeeEmail:"Alex@example.com", 
    employeeDepartmentId:1 
    }, 
    { 
    employeeId : 3, 
    employeeName:"Dave" , 
    employeeMobile :1234563 , 
    employeeEmail:"Dave@example.com", 
    employeeDepartmentId:1 
    }, 
    { 
    employeeId : 4, 
    employeeName:"Dani" , 
    employeeMobile :1234564 , 
    employeeEmail:"Dani@example.com", 
    employeeDepartmentId:2}, 
    { 
    employeeId : 5, 
    employeeName:"Chris" , 
    employeeMobile :1234565 , 
    employeeEmail:"Chris@example.com", 
    employeeDepartmentId:2 
    }, 
    { 
    employeeId : 6, 
    employeeName:"Matt" , 
    employeeMobile :1234566 , 
    employeeEmail:"Matt@example.com", 
    employeeDepartmentId:2 
    } 
] 
var departmentsList = [ 
    {departmentId:1, 
    departmentName:"Dept #1", 
    employeeName:"Mike" 
    }, 
    {departmentId:1, 
    departmentName:"Dept #1", 
    employeeName:"Alex" 
    }, 
    {departmentId:1, 
    departmentName:"Dept #1", 
    employeeName:"Dave"} 
    , 
    {departmentId:2, 
    departmentName:"Dept #2", 
    employeeName:"Matt " 
    }, 
    {departmentId:2, 
    departmentName:"Dept #2", 
    employeeName:"Dani" 
    }, 
    {departmentId:2, 
    departmentName:"Dept #2", 
    employeeName:"Chris "} 
] 
function MainViewModel(){ 
    var self = this; 
    self.AllEmployee = ko.observableArray([]); 
    self.AllDepartmentEmployee= ko.observableArray([]); 
    self.SelectedEmployeeName = ko.observable(); 
    self.LoadEmployees = function(){ 
    // Ajax goes here to load uncomment below 
    // $.ajax({ 
    // type: "GET", 
    // dataType: "json", 
    // url: baseUrl + 'xxx/xxxxxx', 
    // success: function (data) { 
      self.AllEmployee($.map(employeesList, function (item) { 
      return new EmployeeModel(item); 
     })); 
    // }, 
    // error: function (error) { 
    // } 
    //}); 
    } 
    self.GetDepartment = function(employee){ 
     self.SelectedEmployeeName(employee.EmployeeName()) 
     data = {departmentId:employee.EmployeeDepartmentId()} 
    // $.ajax({ 
    // type: "GET", 
    // data:data, 
    // dataType: "json", 
    // url: baseUrl + 'xxx/xxxxxx', 
    // success: function (data) { 
      // HERE YOU MAY JUST GET THE LIST OF EMPLOEES FOR THIS DEPARTMENT OR YOU GET ALL AND HERE YOU FILTER 
     self.AllDepartmentEmployee ($.map(departmentsList, function (item) { 
      if(item.departmentId == employee.EmployeeDepartmentId()){ 
       return new DepartmentModel(item); 
      } 
     })); 
    // }, 
    // error: function (error) { 
    // } 
    // }); 
    } 
} 
function EmployeeModel(data){ 
    var self = this; 
    self.EmployeeId = ko.observable(data.employeeId); 
    self.EmployeeName = ko.observable(data.employeeName); 
    self.EmployeeMobile= ko.observable(data.employeeMobile); 
    self.EmployeeEmail = ko.observable(data.employeeEmail); 
    self.EmployeeDepartmentId= ko.observable(data.employeeDepartmentId); 
} 
function DepartmentModel (data){ 
    var self = this; 
    self.DepartmentId = ko.observable(data.departmentId) 
    self.DepartmentName = ko.observable(data.departmentName) 
    self.EmployeeName = ko.observable(data.employeeName) 
} 
var viewModel = new MainViewModel(); 
ko.applyBindings(viewModel); 
viewModel.LoadEmployees();