I am trying to push a new row to an observable array without any values to show two dropdowns and a few text boxes. This for a timesheet. I am not too sure how I can replicate this in a fiddle.
When I comment out the push part the console log shows the original values, which is what I do not want. Is need to add a new row without any values, somewhere I am missing something or doing something wrong.
Part of the view model
vmTimesheets = function () {
var self = this;
self.TimesheetList = ko.observableArray([]);
self.TimeSheetRows = ko.observableArray([]);
self.TimeSheetHeader = ko.observableArray([]);
self.ProjectList = ko.observableArray([]); // this is filled through an ajax call
self.ActivityList = ko.observableArray([]); // this is filled through an ajax call
self.GetTimesheets = function () {
// get the ajax data from the server
[{"RowTimeSheetID":1,"TimeSheetID":1,"WeekNo":23,"ProjectID":1,"ActivityID":1,"RowUniqueNo":"1433070236953",
"TimesheetColumns":[{"ColTimeSheetID":1,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"5/31/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":false,"IsEnabled":false},{"ColTimeSheetID":2,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/1/2015 12:00:00 AM","DayHours":8,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":3,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/2/2015 12:00:00 AM","DayHours":8,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":4,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/3/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":6,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/4/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":7,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/5/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":8,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/6/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":false,"IsEnabled":false}]}]"
}
//TimeSheetHeader just has the dates of the current week.
self.AddRow = function () {
var jsondata = ""
ko.utils.arrayForEach(objvmTimesheets.TimeSheetHeader(), function (item) {
jsondata = ko.toJSON(objvmTimesheets.TimeSheetRows, ['RowTimeSheetID', 'TimeSheetID', , 'ProjectID', 'ActivityID',
'RowUniqueNo', 'TimesheetColumns', 'ColTimeSheetID', 'RowTimeSheetID', 'TMTypeID', 'WorkDay', 'DayHours',
'DayComments', 'IsWeekday', 'IsEnabled']);
});
objvmTimesheets.TimeSheetRows.push(ko.mapping.fromJSON(JSON.parse(jsondata))); // I assume this should show a new row but it
}
}
Template
<script type="text/html" id="TimesheetListTmpl">
<tr class="box-body table-responsive no-padding">
<td >
<select id="Projects" name="Project" class="form-control" data-bind="options: $root.ProjectList, optionsText: 'ProjectName', optionsValue: 'ProjectID', value: ProjectID, optionsCaption: 'Select',valueAllowUnset: true">
</select>
</td>
<td >
<select id="Activity" name="Activity" class="form-control" data-bind="options: $root.ActivityList, optionsText: 'Activity', optionsValue: 'ActivityID', value: ActivityID, optionsCaption: 'Select',valueAllowUnset: true">
</select>
</td>
<!-- ko foreach : TimesheetColumns -->
<td>
<input style="width:60px" type="text" data-bind="value:DayHours,attr:{id: 'DayHours' + ':' + $index() + $parentContext.$index()},enable:IsWeekday "><span style="padding-left:5px"><a href="#" title='Add Comment'" data-bind="attr:{id: 'DayHours' + ':' + $index() + $parentContext.$index()},visible:IsWeekday " >+</a></span>
</td>
<!-- /ko -->
</tr>
</script>
Error that I get
Uncaught ReferenceError: Unable to process binding "options: function (){return $root.ProjectList }" Message: ProjectID is not defined
EDIT1
After adding a row even though I get that error in the console I try to see what is added in the observable I see the second row as a function where as the first one is just a object. objvmTimesheets.TimeSheetRows()
The output shows like this. The Object has the items mapped where as function c() is nothing. So I am assuming the items to be mapped.
[Object, c()]
Edit 2
Here is fiddle which I get the same error
Working Code
I finally got this to work. Below is my working code. I will also update the fiddle so it would be helpful for reference later/
vmTimesheets = function () {
var self = this;
self.TimesheetList = ko.observableArray([]);
self.TimeSheetRows = ko.observableArray([]);
self.TimeSheetHeader = ko.observableArray([]);
self.ProjectList = ko.observableArray([]); // this is filled through an ajax call
self.ActivityList = ko.observableArray([]); // this is filled through an ajax call
self.GetTimesheets = function () {
// get the ajax data from the server
[{"RowTimeSheetID":1,"TimeSheetID":1,"WeekNo":23,"ProjectID":1,"ActivityID":1,"RowUniqueNo":"1433070236953",
"TimesheetColumns":[{"ColTimeSheetID":1,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"5/31/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":false,"IsEnabled":false},{"ColTimeSheetID":2,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/1/2015 12:00:00 AM","DayHours":8,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":3,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/2/2015 12:00:00 AM","DayHours":8,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":4,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/3/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":6,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/4/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":7,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/5/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":true,"IsEnabled":false},{"ColTimeSheetID":8,"RowTimeSheetID":1,"TMTypeID":0,"WorkDay":"6/6/2015 12:00:00 AM","DayHours":0,"DayComments":"","IsWeekday":false,"IsEnabled":false}]}]"
}
self.AddTimeSheetRows = function () {
objvmTimesheets.objvmAddTimeSheetRow.AddRow();
}
vmAddTimesheetRows = function () {
var self = this
self.RowTimeSheetID = ko.observable("");
self.TimeSheetID = ko.observable("");
self.RowUniqueNo = ko.observable("");
self.WeekNo = ko.observable("");
self.ProjectID = ko.observable("");
self.ActivityID = ko.observable("");
self.TimesheetColumns = ko.observableArray([]);
self.AddRow = function () {
objvmTimesheets.objvmAddTimeSheetRow.TimesheetColumns.removeAll();
var kojsondata = "";
ko.utils.arrayForEach(objvmTimesheets.TimeSheetHeader(), function (item) {
objvmTimesheets.objvmTimeSheetColumns.WorkDay(item.TSDate);
objvmTimesheets.objvmTimeSheetColumns.IsWeekday(item.IsWeekday());
kojsondata = ko.toJSON(objvmTimesheets.objvmTimeSheetColumns, ['ColTimeSheetID', 'RowTimeSheetID', 'WorkDay', 'DayHours', 'DayComments', 'IsWeekday']);
objvmTimesheets.objvmAddTimeSheetRow.TimesheetColumns.push(JSON.parse(kojsondata));
});
objvmTimesheets.objvmAddTimeSheetRow.RowUniqueNo(moment().toDate().getTime())
var jsondata = ko.toJSON(objvmTimesheets.objvmAddTimeSheetRow, ['RowTimeSheetID', 'TimeSheetID', 'WeekNo', 'ProjectID', 'ActivityID',
'RowUniqueNo', 'TimesheetColumns', 'ColTimeSheetID', 'RowTimeSheetID', 'WorkDay', 'DayHours', 'DayComments', 'IsWeekday']);
objvmTimesheets.TimeSheetRows.push(ko.mapping.fromJS(JSON.parse(jsondata)));
}
}; // End Timesheet Rows view model
self.objvmAddTimeSheetRow = new vmAddTimesheetRows();
vmAddTimesheetColumns = function () {
var self = this;
self.ColTimeSheetID = ko.observable("");
self.RowTimeSheetID = ko.observable("");
self.WorkDay = ko.observable("");
self.DayHours = ko.observable("");
self.DayComments = ko.observable("");
self.IsWeekday = ko.observable(true);
}; // End Timesheet Rows view model
self.objvmTimeSheetColumns = new vmAddTimesheetColumns();
}; End of Main View Model