我在我的单页应用程序中使用Knockout js，我需要将一个viewmodel数据的值携带到另一个viewModel数据，所以我可以减少我的重复创建相同的视图，我如何能够实现以下是我的代码。我有两个不同的js文件，其中一个由Employee ViewModel和另一个Department View Model
组成 //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
答案 0 :(得分：1)
首先，您的视图中存在许多需要您注意的拼写错误和错误绑定。示例：
<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>
您可以在employeeViewModel中定义一个可观察变量来保存DepartmentViewModel的新实例，然后您可以通过该变量调用任何函数，而无需多次重新应用ko。
下面我尝试使用您的代码，使用虚假数据向您展示如何处理此问题。 示例：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);