[英]Knockout.js passing viewmodels value to multiple page
I am new to Knockout.js, i have 2 viewModel EmployeeviewModel
and DepartmentViewModel
, i am binding my first view using EmployeeviewModel
its working perfect, now i need make click so i can navigate to second page which is department and in frist i need to display click EmployeeName
and his department, secondly i need to display all the EmployeeName
related to that department how to achive this, how i can pass my first page value to second page display related to departmentID
. 我是Knockout.js的新手,我有2个ViewModel EmployeeviewModel
和DepartmentViewModel
,我正在使用EmployeeviewModel
绑定我的第一个视图,它的工作非常完美,现在我需要单击,以便可以导航到第二个页面,这是部门,我需要显示单击EmployeeName
和他的部门,其次,我需要显示与该部门相关的所有EmployeeName
,以及如何将我的第一页值传递给与departmentID
相关的第二页显示。
function EmployeeViewModel()
{
var self =this;
var Allemployee =ko.observableArray([])
self.getEmployeedetails=function ()
$.ajax({
type: "GET",
dataType: "json",
url: baseUrl + 'xxx/xxxxxx',
success: function (data) {
self.Allemployee($.map(data, function (item) {
return new EmployeeModel(item);
}));
},
error: function (error) {
}
});
self.getDepartment=function()
{
//here i need to navigate to Department page with all department ID
}
}
function EmployeeModel(data)
{
var self =this;
self.employeeName = ko.observable(data.employeeName )
self.employeeMobile= ko.observable(data.employeeMobile)
self.employeeemail = ko.observable(data.employeeemail )
self.employeedepartmentId= ko.observable(data.employeedepartmentId)
}
function DepartmentViewModel()
{
var self =this;
var AllDepartmentemployee =ko.observableArray([])
self.getEmployeedetails=function ()
$.ajax({
type: "GET",
dataType: "json",
url: baseUrl + 'xxx/xxxxxx',
success: function (data) {
self.AllDepartmentemployee ($.map(data, function (item) {
return new DepartmentModel(item);
}));
},
error: function (error) {
}
});
}
function DepartmentModel (item)
{
self.departmentId= ko.observable(data.departmentId)
self.departmentName=ko.observable(data.departmentName)
self.employeeName=ko.observable(data.employeeName)
}
var viewModel=new EmployeeViewModel()
ko.applyBindings(EmployeeViewModel,document.getElementById("employeeDetails"))
var viewModel 2=new DepartmentViewModel()
ko.applyBindings(viewModel,document.getElementById("department"))
//html//
//First view
<div data-role="view" id="employeeDetails">
<ul>
<li>
<div data-bind="text:employeeName"></div>
<div data-bind="text:employeeMobile"></div>
<div data-bind="text:employeeemail "></div>
<div data-bind="text:employeedepartmentId"></div>
<a href="#" data-bind="click:getDepartment"></a>
</li>
</ul>
<div>
//second View
<div data-role="view" id="department">
<div data-bind="text:employeeName">
<div>
<div data-bind="text:departmentName">
<div>
<ul data-bind:"foreach:AllDepartmentemployee">
<li>
<div data-bind="text:employeeName">
<div data-bind="text:departmentName"></div>
</li>
<ul>
<div>
You need to have a Main view model
and have two sub view models
for your departments
and employees
. 您需要有一个Main view model
并为您的departments
和employees
提供两个sub view models
。 Then every time you click on any employee you will have the departmentId
then based on your logic you can either send a request to the server along with Id
and get back all the employees under that department or you already have all departments and you just filter
them based on departmentId
that has been passed. 然后,每次单击任何员工时,您都将拥有departmentId
然后根据您的逻辑可以将请求和Id
一起发送到服务器,并取回该部门下的所有员工,或者您已经拥有所有部门,只需filter
它们即可基于已传递的departmentId
。
Below is an example how to handle: https://jsfiddle.net/kyr6w2x3/124/ 以下是如何处理的示例: https : //jsfiddle.net/kyr6w2x3/124/
HTML: HTML:
<div data-role="view" id="employeeDetails">
<ul >
<li>
<span class="info">Name</span>
<span class="info">Mobile</span>
<span class="info">Email</span>
<span class="info">Dept.NO</span>
</li>
<hr>
<!-- ko foreach: AllEmployee -->
<li>
<span data-bind="text:EmployeeName" class="info"></span>
<span data-bind="text:EmployeeMobile" class="info"></span>
<span data-bind="text:EmployeeEmail " class="info"></span>
<span data-bind="text:EmployeeDepartmentId" class="info"></span>
<a href="#" data-bind="click:$parent.GetDepartment">Click</a>
</li>
<!-- /ko -->
</ul>
<div>
//second View
<div data-role="view" id="department">
<h1 data-bind="text:SelectedEmployeeName"></h1>
<div data-bind="if:AllDepartmentEmployee().length > 0">
<h3 data-bind ="text:AllDepartmentEmployee()[0].DepartmentName()"></h3>
</div>
<ul data-bind ="foreach:AllDepartmentEmployee">
<li>
<div data-bind="text:EmployeeName"></div>
<!-- <div data-bind="text:DepartmentName"></div> -->
</li>
<ul>
<div>
VM: 虚拟机:
var employeesList = [{
employeeId : 1,
employeeName:"Mike" ,
employeeMobile :1234561 ,
employeeEmail:"Mike@example.com",
employeeDepartmentId:1},
{
employeeId : 2,
employeeName:"Alex" ,
employeeMobile :1234562 ,
employeeEmail:"Alex@example.com",
employeeDepartmentId:1
},
{
employeeId : 3,
employeeName:"Dave" ,
employeeMobile :1234563 ,
employeeEmail:"Dave@example.com",
employeeDepartmentId:1
},
{
employeeId : 4,
employeeName:"Dani" ,
employeeMobile :1234564 ,
employeeEmail:"Dani@example.com",
employeeDepartmentId:2},
{
employeeId : 5,
employeeName:"Chris" ,
employeeMobile :1234565 ,
employeeEmail:"Chris@example.com",
employeeDepartmentId:2
},
{
employeeId : 6,
employeeName:"Matt" ,
employeeMobile :1234566 ,
employeeEmail:"Matt@example.com",
employeeDepartmentId:2
}
]
var departmentsList = [
{departmentId:1,
departmentName:"Dept #1",
employeeName:"Mike"
},
{departmentId:1,
departmentName:"Dept #1",
employeeName:"Alex"
},
{departmentId:1,
departmentName:"Dept #1",
employeeName:"Dave"}
,
{departmentId:2,
departmentName:"Dept #2",
employeeName:"Matt "
},
{departmentId:2,
departmentName:"Dept #2",
employeeName:"Dani"
},
{departmentId:2,
departmentName:"Dept #2",
employeeName:"Chris "}
]
function MainViewModel(){
var self = this;
self.AllEmployee = ko.observableArray([]);
self.AllDepartmentEmployee= ko.observableArray([]);
self.SelectedEmployeeName = ko.observable();
self.LoadEmployees = function (){
// Ajax goes here to load uncomment below
// $.ajax({
// type: "GET",
// dataType: "json",
// url: baseUrl + 'xxx/xxxxxx',
// success: function (data) {
self.AllEmployee($.map(employeesList, function (item) {
return new EmployeeModel(item);
}));
// },
// error: function (error) {
// }
//});
}
self.GetDepartment = function(employee){
self.SelectedEmployeeName(employee.EmployeeName())
data = {departmentId:employee.EmployeeDepartmentId()}
// $.ajax({
// type: "GET",
// data:data,
// dataType: "json",
// url: baseUrl + 'xxx/xxxxxx',
// success: function (data) {
// HERE YOU MAY JUST GET THE LIST OF EMPLOEES FOR THIS DEPARTMENT OR YOU GET ALL AND HERE YOU FILTER
self.AllDepartmentEmployee ($.map(departmentsList, function (item) {
if(item.departmentId == employee.EmployeeDepartmentId()){
return new DepartmentModel(item);
}
}));
// },
// error: function (error) {
// }
// });
}
}
function EmployeeModel(data){
var self = this;
self.EmployeeId = ko.observable(data.employeeId);
self.EmployeeName = ko.observable(data.employeeName);
self.EmployeeMobile= ko.observable(data.employeeMobile);
self.EmployeeEmail = ko.observable(data.employeeEmail );
self.EmployeeDepartmentId= ko.observable(data.employeeDepartmentId);
}
function DepartmentModel (data){
var self = this;
self.DepartmentId = ko.observable(data.departmentId)
self.DepartmentName = ko.observable(data.departmentName)
self.EmployeeName = ko.observable(data.employeeName)
}
var viewModel = new MainViewModel();
ko.applyBindings(viewModel);
viewModel.LoadEmployees();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.