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.
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. 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.
Below is an example how to handle: https://jsfiddle.net/kyr6w2x3/124/
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:"[email protected]",
employeeDepartmentId:1},
{
employeeId : 2,
employeeName:"Alex" ,
employeeMobile :1234562 ,
employeeEmail:"[email protected]",
employeeDepartmentId:1
},
{
employeeId : 3,
employeeName:"Dave" ,
employeeMobile :1234563 ,
employeeEmail:"[email protected]",
employeeDepartmentId:1
},
{
employeeId : 4,
employeeName:"Dani" ,
employeeMobile :1234564 ,
employeeEmail:"[email protected]",
employeeDepartmentId:2},
{
employeeId : 5,
employeeName:"Chris" ,
employeeMobile :1234565 ,
employeeEmail:"[email protected]",
employeeDepartmentId:2
},
{
employeeId : 6,
employeeName:"Matt" ,
employeeMobile :1234566 ,
employeeEmail:"[email protected]",
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();