Knockout.js傳遞viewmodels值到多個頁面

Question

我是新來的Knockout.js，我有2 viewModel EmployeeviewModel和DepartmentViewModel，我綁定我的第一視圖使用EmployeeviewModel其工作完美，現在我需要點擊，所以我可以導航到第二頁是部門和第一我需要顯示點擊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();