如何将数据从一个 viewModel 携带到另一个 ViewModel Knockout JS
[英] How to carry the data from one viewModel to another ViewModel Knockout JS
本文介绍了如何将数据从一个 viewModel 携带到另一个 ViewModel Knockout JS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的单页应用程序中使用 Knockout js，我需要将一个视图模型数据的值携带到另一个视图模型数据，所以我可以减少创建相同视图的重复，我如何在下面实现这一点是我的代码.我有 2 个不同的 js 文件，其中一个由员工视图模型和另一个部门视图模型组成
//员工视图<div class="Employee-view" data-role="view" id="employee"><div data-role="内容" ><ul><li foreach:EmployeeData>//Onlcick 需要导航到部门视图并绑定特定员工 ID 上的所有值<div 数据绑定:"click:GetDepartmentDetails"><span data-bind:"text:EmployeeId"><跨度><span data-bind:"text:EmployeeName"><跨度><span data-bind:"text:EmployeeImage"><跨度><div><li><ul>
EmployeeViewModel = new EmployeeDetailsViewModel();;$(".Employee-view").each(function () {ko.applyBindings(EmployeeViewModel, $(this).get(0));});函数 EmployeeViewModel(){var self=this;self.EmployeeData = ko.observableArray([]);self.GetEmployee=function(用户名，密码){var UserModel = { 用户名:用户名，密码:密码}$.ajax({类型:POST"，数据类型:json"，url: serverUrl + 'xxx/xxx/GetEmployee',数据:用户模型，成功:功能(数据){self.EmployeeData($.map(data, function (item) {返回新员工模型(项目)；})),});}//点击事件self.GetDepartmentDetails=(员工数据){//我正在获取这个 ViewModel 中的所有值，我需要将此值传递给 DepartmentViewModel 并且我需要调用该函数self.GetEmployeeByDepartment();}}函数员工模型(数据){var self=this;self.EmployeeId=ko.observable(data.EmployeeId)self.EmployeeName=ko.observable(data.EmployeeName)self.EmployeeImage=ko.observable(data.EmployeeImage)}//部门视图<div class="Department-view" data-role="view" id="Department"><div data-role="内容"><ul><li data-bind:"foreach:DepartmentData"><div><span data-bind:"text:DeptId"><跨度><span data-bind:"text:DeptName"><跨度><div><li><ul>
//部门视图模型功能部门ViewModel(){var self=this;self.DepartmentData = ko.observableArray([]);self.GetEmployeeByDepartment=function(item){员工 ID = 项目.员工 ID员工姓名=项目.员工姓名var DeptModel = { 员工姓名:员工 ID，员工姓名:员工姓名}$.ajax({类型:POST"，数据类型:json"，url: serverUrl + 'xxx/xxx/GetDepratmenDetails',数据:部门模型，成功:功能(数据){self.DepartmentData ($.map(data, function (item) {返回新的部门模型(项目)；})),});}}}功能部门模型(数据){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));});
解决方案
这就是 components 是为了.有一个带有自己的 ViewModel 的 Employee 组件，一个带有自己的 ViewModel 的 Department 组件，以及一个协调它们的应用程序 ViewModel.一般而言，最佳实践是对整个应用程序applyBindings一次，让 Knockout 对 DOM 进行所有控制.
您做事的方式表明您从包含多个员工和部门的 HTML 开始，也就是说，您的数据嵌入在您的 HTML 中，并且您希望 Knockout 从那里提取它.这不是好的做法.您的 ViewModel 中应包含员工数据，而 View 应反映 ViewModel 中的内容.
I am using the Knockout js in my single page Application,I need to carry the value of one viewmodel data to another viewModel data,So i can reduce my duplication creating same view, How i can achieve this below is my code.I got 2 different js file,which one consist of Employee ViewModel and in another 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));
});
解决方案
This is what components are for. Have an Employee component with its own ViewModel, a Department component with its own ViewModel, and an application ViewModel that coordinates them. In general, best practice is to applyBindings once for the entire application, and let Knockout do all control of the DOM.
The way you're doing things suggests that you start with HTML that has multiple employees and departments in it, which is to say, your data is embedded in your HTML and you're expecting Knockout to extract it from there. That is not good practice. Your ViewModel should have the employee data in it and the View should reflect what is in the ViewModel.
这篇关于如何将数据从一个 viewModel 携带到另一个 ViewModel Knockout JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
