I have a method in my controller (GetAllPatients
/EnrollmentQueue
) which does return the correct data (an array of ViewModel
s). I'm new in Knockout.js, so it's hard for me to understand how to display this data correctly. Here is my HTML:
<table data-bind="visible: Patients().length > 0">
<thead>
<tr>
<th>
Assigned to
</th>
<th>
Follow up Date
</th>
<th>
Follow up
</th>
<th>
Patient Name
</th>
<th>
Foundation
</th>
</tr>
</thead>
<tbody data-bind="foreach: Patients">
<tr>
<td><label data-bind="text:AssignedTo().ItemName"></label></td>
<td> <label data-bind="text: FollowUpDate "></label></td>
<td data-bind="text: Foundation"></td>
<td data-bind="text: PatientName"></td>
<td data-bind="text: FollowupItem().ItemName"></td>
</tr>
</tbody>
</table>
Here is the JavaScript:
<script type="text/javascript">
(function PatientViewModel() {
var self = this;
self.FollowUpDate = ko.observable(new Date());
self.FollowupItem = ko.observable("");
self.PatientName = ko.observable("");
self.Foundation = ko.observable("");
self.AssignedTo = ko.observable("");
self.DoctorName = ko.observable("");
self.Id = ko.observable(0);
var PatientInfo = {
FollowUpDate: self.FollowUpDate,
FollowupItem: self.FollowUpItems,
PatientName: self.PatientName,
Foundation: self.Foundation,
AssignedTo: self.AssignedTo
};
self.PatientInfo = ko.observable();
self.Patients = ko.observableArray();
self.FollowUpDateFilter = ko.observable("");
self.FollowupItemFilter = ko.observable("");
self.PatientNameFilter = ko.observable("");
self.FoundationFilter = ko.observable("");
self.AssignedToFilter = ko.observable("");
var searchInfo =
{
FollowUpDateFilter: self.FollowUpDateFilter,
FollowupItemFilter: self.FollowupItemFilter,
PatientNameFilter: self.PatientNameFilter,
FoundationFilter: self.FoundationFilter,
AssignedToFilter: self.AssignedToFilter
};
self.filter = function () {
var modelToSend = {
FollowUpDateFilter: searchInfo.FollowUpDateFilter(),
FollowupItemFilter: searchInfo.FollowupItemFilter()?searchInfo.FollowupItemFilter().ItemName():"",
PatientNameFilter: searchInfo.PatientNameFilter(),
FoundationFilter: searchInfo.FoundationFilter() ? searchInfo.FoundationFilter().FoundationName() : "",
AssignedToFilter: searchInfo.AssignedToFilter()?searchInfo.AssignedToFilter().DoctorsName():""
};
var viewModel = ko.toJS(modelToSend);
$.ajax({
url: 'GetAllPatients/EnrollmentQueue',
cashe: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: ko.toJSON(viewModel),
success: function (result) {
self.Patients(result);
}
});
}
self.AllDoctors = ko.mapping.fromJS(@Html.Raw(Json.Encode(ViewData["doctors"])));
self.AllFollowUpItems = ko.mapping.fromJS(@Html.Raw(Json.Encode(Session["followUpItems"])));
self.AllFoundations = ko.mapping.fromJS(@Html.Raw(Json.Encode(Session["foundation"])));
$.ajax({
url: '@Url.Action("GetAllPatients", "Enrollment")',
cashe: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
self.Patients(data);
}
});
$(document).ready(function () {
var viewModel = new PatientViewModel();
ko.applyBindings(viewModel);
});
}(window));
</script>
The page is calling the GetAllPatients
method from Controller
several times, and I'd like to simplify this. If you need more information, please ask.