如何将数据从一个 viewModel 传送到另一个 ViewModel Knockout JS答案

【问题标题】：How to carry the data from one viewModel to another ViewModel Knockout JS如何将数据从一个 viewModel 传送到另一个 ViewModel Knockout JS
【发布时间】：2017-04-03 08:35:39
【问题描述】：

我在我的单页应用程序中使用 Knockout js，我需要将一个视图模型数据的值传送到另一个视图模型数据，所以我可以减少创建相同视图的重复，下面是我的代码。我有 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));
  });

【问题讨论】：

这里的文章不错。 wrapcode.com/…
我尝试使用您上面的代码创建一个示例，但是语法错误太多，无法说明代码应该做什么。可以稍微清理一下吗？如果您可以使用 jsfiddle 或类似工具创建一个工作示例，那将很有帮助。
我有两个 js 文件，其中一个文件由 EmployeeViewModel 组成，另一个由 DepartmentViewModel 组成。在页面加载时，我获得了 EmployeeViewModel 和 DepartmentViewModel 的所有价值。现在绑定后，我有数据绑定：“click：GetDepartmentDetails”这个点击事件在EmployeeViewModel中，当我点击这个时，我需要将EmployeeData observablearry带到另一个DepartmentViewModel，所以我可以获得特定的用户Deprtament
knockoutjs.com/documentation/component-overview.html

标签： javascript knockout.js knockout-2.0 knockout-3.0

【解决方案1】：

您可以尝试在一个对象中收集您的实例化视图模型，然后在该对象上运行应用绑定。您将不得不重新调整您已经绑定的内容。但是有了这个，您应该能够通过访问例如 vm.EmployeeViewModel.SomeFunction() 来在模型之间交叉引用

var vm = {};
vm.EmployeeViewModel = new EmployeeViewModel();
vm.DepartmentViewModel = new DepartmentViewModel();
ko.applyBindings(vm);

【讨论】：

viewModel = new EmployeeViewModel(); $(".employee-view").each(function () { ko.applyBindings(viewModel, $(this).get(0)); });上面的代码 hw 我正在绑定，我正在使用类所以我可以在多视图中使用
我已经更新了绑定，请帮助我将数据从一个视图模型传输到另一个视图模型

【解决方案2】：

这就是components 的用途。拥有一个拥有自己的 ViewModel 的 Employee 组件，一个拥有自己的 ViewModel 的 Department 组件，以及一个协调它们的应用程序 ViewModel。一般来说，最好的做法是为整个应用程序 applyBindings 一次，然后让 Knockout 完成对 DOM 的所有控制。

您做事的方式建议您从包含多个员工和部门的 HTML 开始，也就是说，您的数据嵌入在您的 HTML 中，您希望 Knockout 从那里提取它。这不是好的做法。您的 ViewModel 中应该包含员工数据，并且 View 应该反映 ViewModel 中的内容。

【讨论】：