![](/img/trans.png)
[英]How to carry one viewModel data to other ViewModel function using Knockout JS of another page
[英]How to carry the data from one viewModel to another ViewModel Knockout JS
我在我的单页应用程序中使用Knockout js,我需要将一个viewmodel数据的值携带到另一个viewModel数据,所以我可以减少我的重复创建相同的视图,我如何能够实现这一点下面是我的代码。我得到了2不同的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));
});
您可以尝试在对象中收集实例化视图模型,然后在此对象上运行applybindings。 你必须重新扫描你已经绑定的东西。 但是,通过访问例如vm.EmployeeViewModel.SomeFunction(),您应该能够在模型之间交叉引用。
var vm = {};
vm.EmployeeViewModel = new EmployeeViewModel();
vm.DepartmentViewModel = new DepartmentViewModel();
ko.applyBindings(vm);
这就是组件的用途。 拥有一个拥有自己的ViewModel的Employee组件,一个拥有自己的ViewModel的Department组件,以及一个协调它们的应用程序ViewModel。 一般来说,最佳实践是对整个应用程序应用一次applyBindings
,并让Knockout对DOM进行所有控制。
您的工作方式表明您从拥有多个员工和部门的HTML开始,也就是说,您的数据嵌入在您的HTML中,并且您期望Knockout从那里提取它。 这不是好习惯。 您的ViewModel应该包含员工数据,View应该反映ViewModel中的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.