1つのviewModelから別のViewModelノックアウトにデータを移動する方法JS

Question

私は単一ページのアプリケーションでKnockout jsを使用しています。アプリケーションを別のviewModelデータに移動する必要があります。同じビューには、私はこれを達成することができますどのように以下の私のcode.Iがモデル

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

Answer 1

あなたがでウルインスタンス化ビューモデルを収集するために試みることができるが、従業員のViewModelから成り1 2異なるJSファイルを、持って、別の部門ビューでありますこのオブジェクトに対してapplybindingsを実行します。すでにバインドしたものを再審査しなければならないでしょう。しかし、これであなたは、これがcomponentsはためているものです）

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

Answer 2

（例えばvm.EmployeeViewModel.SomeFunctionのためにアクセスすることにより、モデル間の参照を横断することができるはずです。独自のViewModel、独自のViewModelを持つDepartmentコンポーネント、およびそれらを調整するアプリケーションViewModelを持つEmployeeコンポーネントがあります。一般的には、アプリケーション全体に対してapplyBindingsを1回実行し、KnockoutにDOMのすべての制御をさせるのがベストプラクティスです。

あなたがしていることは、複数の従業員と部門があるHTMLから始めることを示唆しています。つまり、データがHTMLに埋め込まれており、そこからKnockoutがデータを抽出することを期待しています。それは良い習慣ではありません。あなたのViewModelはその中に従業員データを持ち、ViewはViewModelにあるものを反映する必要があります。