如何從一個視圖模型進行數據到另一個視圖模型淘汰賽JS

Question

我用我的單頁應用基因敲除JS，我需要隨身攜帶一個視圖模型到另一個數據視圖模型數據的價值，這樣我就可以減少我重複創建同樣的觀點，我怎麼能做到這一點下面是我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)); 
    }); 

Answer 1

你可以嘗試收集烏爾實例化視圖模型在對象，然後在此對象上運行applybindings。你將不得不重新調整已經綁定的東西。但有了這個，你應該能夠通過訪問例如vm.EmployeeViewModel.SomeFunction跨越模型之間引用（）

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

Answer 2

這是components是。擁有一個帶有自己的ViewModel的Employee組件，一個帶有自己ViewModel的Department組件和一個協調它們的應用程序ViewModel。一般來說，最佳做法是在整個應用程序中對applyBindings一次，並讓Knockout完成對DOM的所有控制。

你做事情的方式表明你從HTML開始，它有多個員工和部門，也就是說，你的數據嵌入在你的HTML中，你期望Knockout從那裏提取它。這不是很好的做法。您的ViewModel應該有其中的員工數據，視圖應該反映ViewModel中的內容。