Eric lippert - Amazon Web Services

Id: ko.protectedObservable(timeCard.Id),
Summary: ko.protectedObservable(timeCard.Summary),
Description: ko.protectedObservable(timeCard.
Description),
StartDate: ko.protectedObservable((new Date(timeCard.
StartDate)).toJSON()),
EndDate: ko.protectedObservable((new Date(timeCard.
EndDate)).toJSON()),
Status: ko.protectedObservable(timeCard.Status)
};
}
}
The View
Once the view model is in place, we setup our view by updating
the Index.cshtml. This page is served up by the HomeController,
but we don’t have any Controller side code for it. We’ll make
AJAX calls to the API controller to manipulate data.
Add New TimeCard
Summary
Start Date
End Date
Select
Demo
VCalendar
Summary
Description
Start Date
End Date
Status
Save
Cancel
@section Scripts{
}
We have split the view into two using the ‘left-section’ and
‘right-section’ CSS classes. The ‘left-section’ has the List of all
the TimeCards whereas the ‘right-section’ shows the currently
selected card if any.
To edit a card, we ‘Select’ it first. This populates the
selectedTimeCard property in the view model which is bound to
the ‘right-section’ and thus it comes up automatically. Once we
do the changes and save, the data is posted back to the server
and the selectedTimeCard is cleared out.
The implementation for adding new, selecting and saving data is
in the timekeeper-client.js.
66 | DNCmagazine www.dotnetcurry.com