하나의 viewModel 데이터를 다른 페이지의 Knockout JS를 사용하여 운반하는 방법

Question

내 단일 페이지 응용 프로그램에서 Knockout js를 사용하고 있습니다. 하나의 viewmodel 데이터 값을 다른 viewModel 데이터로 가져와야합니다. 같은 뷰를 생성 내 중복, 내가 이것을 달성 할 수있는 방법을 아래에 우리가하지 않았다 나의 code.I이 직원 뷰 모델로 구성되어 하나 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);