如何将数据从一个ViewModel携带到另一个ViewModel Knockout JS [英] How to carry the data from one viewModel to another ViewModel Knockout JS

问题描述

我在单页应用程序中使用Knockout js，我需要将一个viewmodel数据的值携带到另一个viewModel数据中，因此我可以减少创建相同视图的重复，下面是我如何实现此代码.我有2个不同的js文件，其中一个由Employee ViewModel组成，而在另一个Department View模型中

I am using the Knockout js in my single page Application,I need to carry the value of one viewmodel data to another viewModel data,So i can reduce my duplication creating same view, How i can achieve this below is my code.I got 2 different js file,which one consist of Employee ViewModel and in another 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));
  });

推荐答案

这是组件是.拥有一个拥有自己的ViewModel的Employee组件，一个拥有自己的ViewModel的Department组件以及一个协调它们的应用程序ViewModel.通常，最佳实践是对整个应用程序一次applyBindings，然后让Knockout对DOM进行所有控制.

This is what components are for. Have an Employee component with its own ViewModel, a Department component with its own ViewModel, and an application ViewModel that coordinates them. In general, best practice is to applyBindings once for the entire application, and let Knockout do all control of the DOM.

您的处事方式建议您从包含多个员工和部门的HTML开始，这就是说，您的数据已嵌入HTML中，并且您希望Knockout可以从中提取数据.那不是一个好习惯.您的ViewModel应该具有雇员数据，并且View应该反映ViewModel中的内容.

The way you're doing things suggests that you start with HTML that has multiple employees and departments in it, which is to say, your data is embedded in your HTML and you're expecting Knockout to extract it from there. That is not good practice. Your ViewModel should have the employee data in it and the View should reflect what is in the ViewModel.

这篇关于如何将数据从一个ViewModel携带到另一个ViewModel Knockout JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！