別のページのKnockout JSを使用して1つのviewModelデータを他のViewModel関数に渡す方法

Question

私は1ページのアプリケーションでKnockout jsを使用しています。1つのviewmodelデータの値を別のviewModelデータに渡す必要があります。同じビューを作成し、私の重複が、私はこれを達成するにはどうすればよい以下、我々はなかったように私code.Iは、従業員のViewModelから成り1 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

最初にあなたの注意を必要とする多くのタイプミスとあなたのビューに間違ったバインディングがあります。例：あなたがDepartmentViewModelの新しいインスタンスを保持するために、あなたのemployeeViewModelで観測可能変数を定義することができ、その後、あなたがその変数を介して任意の関数を呼び出すことができますし、ko何回も再適用する必要はありません

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

。

以下、私は偽のデータを使用してコードを使用して、これにアプローチする方法を示しています。 例：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);