如何使用另一个页面的Knockout JS将一个viewModel数据携带到其他ViewModel函数

Question

我在我的单页应用程序中使用 Knockout js，我需要将一个视图模型数据的值传递给另一个视图模型数据，所以我可以减少创建相同视图的重复，下面是我如何实现的code.I 得到了 2 个不同的 js 文件，其中一个包含员工视图模型，另一个包含部门视图模型

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

这是一个重复的问题，因为我们无法解决它。请帮忙 How to carry the data from one viewModel to another ViewModel Knockout JS

Answer 1

首先，您的观点中有很多错别字和错误的绑定需要您注意。示例：

<ul>
  <li foreach:EmployeeData>  // There is no data-bind="
    <div databind:"click:GetDepartmentDetails">   //databind => data-bind and You need = not : <div data-bind="click:$parent.GetDepartmentDetails">
        <span data-bind:"text:EmployeeId"> <span> // You need = not : 
        <span data-bind:"text:EmployeeName"> <span>
        <span data-bind:"text:EmployeeImage"> <span>
     <div> 
   <li>
<ul>

您可以在 employeeViewModel 中定义一个可观察变量来保存 DepartmentViewModel 的新实例，然后您可以通过该变量调用任何函数，而无需多次重新申请 ko。

下面我试图通过使用虚假数据来使用您的代码来向您展示如何解决这个问题。示例：https://jsfiddle.net/kyr6w2x3/157/

查看：

<h1>Employee View</h1>
<div class="Employee-view"  data-role="view" id="employee">
  <div data-role="content" >
    <ul>
      <li data-bind="foreach:EmployeeData">
        <div data-bind="click:$parent.GetDepartmentDetails">
          <span data-bind="text:EmployeeId"> </span>
          <span data-bind="text:EmployeeName"> </span>
          <span data-bind="text:EmployeeImage"> </span>
        </div> 
      </li>
    </ul>
  </div>
</div>

<hr>

<h1>Department View</h1>
<div data-bind="with:DepartmentVM">
  <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>
</div>

型号：

function EmployeeViewModel() {
  var self = this;
  // Here you define an observable variable to hold your DepartmentVM 
  self.DepartmentVM = ko.observable();
  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);
         }))
       }
    });
  }

  //Here I am calling GetEmployee()
  self.GetEmployee();

  // Below you have a knockout function
  self.GetDepartmentDetails = function (EmployeeData){
    console.log(EmployeeData)
    // Create a new instance of your DepartmentViewModel and then you can call the fucntion inside of it and pass your data
    self.DepartmentVM(new DepartmentViewModel());
    self.DepartmentVM().GetEmployeeByDepartment(EmployeeData);
  }
}
function DepartmentViewModel () {
  var self = this;
  self.DepartmentData = ko.observableArray([]);
  self.GetEmployeeByDepartment = function(item){  
    //Below you need ()  to get the value of observable variable item.EmployeeId()
    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)
}
function EmployeeModel(data)
{
  var self = this;
  self.EmployeeId = ko.observable(data.EmployeeId)
  self.EmployeeName = ko.observable(data.EmployeeName)
  self.EmployeeImage = ko.observable(data.EmployeeImage)
}
var EmployeeVM = new EmployeeViewModel()
ko.applyBindings(EmployeeVM);

如何使用另一个页面的Knockout JS将一个viewModel数据携带到其他ViewModel函数

How to carry one viewModel data to other ViewModel function using Knockout JS of another page

javascript

knockout-2.0

knockout.js

knockout-3.0