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

Knockout.js将viewmodels值传递给多个页面

1 个答案: