하나의 viewModel에서 다른 ViewModel Knockout으로 데이터를 옮기는 방법 JS

Question

내 단일 페이지 응용 프로그램에서 Knockout js를 사용하고 있습니다. 하나의 viewmodel 데이터 값을 다른 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

당신은 통해 UR 복제 된 뷰 모델을 수집하기 위해 시도 할 수를 직원 뷰 모델로 구성되어 하나 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으로 한 번이며 Knockout이 모든 DOM 제어를 수행하도록합니다.

당신이하는 일은 여러 직원과 부서가있는 HTML로 시작하는 것입니다. 즉, HTML에 데이터가 포함되어 있고 거기에서 녹아웃이 추출 될 것으로 기대하고 있습니다. 그건 좋은 습관이 아닙니다. ViewModel에는 직원 데이터가 있어야하며 View는 ViewModel의 내용을 반영해야합니다.