javascript - 如何使用另一页面的 Knockout JS 将一个 viewModel 数据传递到其他 ViewModel 函数

Question

我在我的单页应用程序中使用Knockout js，我需要将一个 View 模型数据的值传递到另一个 View 模型数据，这样我就可以减少创建相同 View 的重复，下面是我的代码如何实现这一点。我有 2 个不同的 js 文件，其中一个由 Employee ViewModel 组成，另一个由 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));
       });

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

Answer 1

首先，您认为有许多拼写错误和错误的绑定(bind)需要您注意。示例:

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