I am currently utilizing knockout js in conjunction with asp.net mvc (vs2013) and entity framework. Initially, I have an index page (masterViewModel) where I define all my sub view models.
Furthermore, I have a viewmodel and a function that sends an ajax call to the server side, retrieves data from the server, inserts it into an observable array, and binds the elements of that array to the view. The data fetched from the server includes three objects. While the binding process is successful, instead of displaying three distinct assistant driver names on the view, it repeats the same value thrice (object 2) after looping through object 0 and 1. Presently, my output looks like this:
smith smith smith
This is my ajax call using knockout:
function populateDrivers() {
if (!masterViewModel.isAuthenticated()) return;
$.when(getSecureData("/api/Drivers/?driverId="))
.done(function (resp) {
masterViewModel.vehicleDetail.assistantDriverList(resp.assistantDriverList)
ko.utils.arrayMap(resp.assistantDriverList, function (obj) {
//ko.utils.arrayForEach(resp.assitantDriverList, function (obj)
//arrayMap
masterViewModel.FleetInfoVM.vehicleDetail.assistantDriverName(obj.assistantDriverName);
masterViewModel.FleetInfoVM.vehicleDetail.carRegNumber(obj.CarRegNumber);
masterViewModel.FleetInfoVM.vehicleDetail.make(obj.Make);
masterViewModel.FleetInfoVM.vehicleDetail.Model(obj.Model);
});
});
}
And this is the HTML binding:
<table style="table-layout: fixed" class="table table-striped table-bordered">
<thead>
<tr>
<th>Assistant Name</th>
</tr>
</thead>
<tr>
<td data-bind="text: $root.FleetInfoVM.vehicleDetail.assistantDriverName"> </td>
<td class="td-actions">
<a class="btn btn-small" data-bind="click: $root.vehicleDetail.edit" title="Edit">
<i class="icon-edit"></i>
</a>
<a class="btn btn-small" ">
</a>
<a class="btn btn-small">
</a>
</td>
</tr>
</tbody>
</table>
Below are my defined view models:
function MasterViewModel() {
var pvm = this;
mvm.loginVM = new LoginViewModel();
mvm.VehicleVM = new vehicleViewModel();
mvm.topManagerVM = new TopManagerViewModel();
mvm.FleetInfoVM = new FleetInfoViewModel
}
MasterViewModel = new MasterViewModel();
ko.applyBindings(MasterViewModel, document.getElementById("htmlTop"));
FleetInfoViewModel
=========================================================================
function FleetInfoViewModel
{
var fiv = this;
fiv.branch id = ko.observable(0);
fiv.branch name = ko.observable(0);
fiv.location = ko.observable("");
fiv.driverDetail = new DriverViewModel();
fiv.vehicleDetail = new vehicleViewModel();
}
function DriverViewModel() {
var drv = this;
drv.driverId = ko.observable(0);
drv.driverName = ko.observable("");
}
function vehicleViewModel{
vvm.assitantDriverList = ko.observable([]);
vvm.assistantDriverName = ko.observable("");
vvm.regNumber = ko.observable(0);
vvm.make = ko.observable("");
vvm.model = ko.observable("");
}