Eric lippert - Amazon Web Services

wrapper for an observable that protects value until
committed
ko.protectedObservable = function (initialValue)
{
//private variables
var _temp = initialValue;
var _actual = ko.observable(initialValue);
var result = ko.dependentObservable({
read: _actual,
write: function (newValue)
{
_temp = newValue;
}
});
//commit the temporary value to our observable, if it
is different
result.commit = function ()
{
if (_temp !== _actual())
{
_actual(_temp);
}
};
//notify subscribers to update their value with the
original
result.reset = function ()
{
_actual.valueHasMutated();
_temp = _actual();
};
return result;
};
The above script prevents Updates to the ViewModel unless
we call an explicit commit() method. Once this script is in, our
dependencies are set. Let’s build a View Model.
The View Model
We’ll add a new JavaScript file to the Scripts folder called
timekeepr-vm.js
In the ViewModel, we have a collection called timecards that
essentially lists all the time cards in the database.
The selectedTimeCard property is set when the user clicks on
the ‘Select’ link on any of the Time Card rows OR when a new
TimeCard is added.
The addNewTimeCard method is called when user clicks on the
“Add New TimeCard” button. It adds an empty TimeCard object
into the timecards collection. This method is also called when
we are loading data from server into our ViewModel. In that
case, it maps the JSON objects into KO Observable objects.
The commitAll function is a helper function that commits each
property in the selectedTimeCard. It has to be called before we
save any changes to the database.
var viewModel = {
timecards: ko.observableArray([]),
selectedTimeCard: ko.observable(),
addTimeCard: function ()
{
viewModel.timecards.push(addNewTimeCard());
},
selectTimeCard: function ()
{
viewModel.selectedTimeCard(this);
},
commitAll: function ()
{
viewModel.selectedTimeCard().Summary.commit();
viewModel.selectedTimeCard().Description.commit();
viewModel.selectedTimeCard().StartDate.commit();
viewModel.selectedTimeCard().EndDate.commit();
viewModel.selectedTimeCard().Status.commit();
}
};
function addNewTimeCard(timeCard)
{
if (timeCard == null)
{
return {
Id: ko.protectedObservable(0),
Summary: ko.protectedObservable(“[Summary]”),
Description: ko.protectedObservable(“[Description]”),
StartDate: ko.protectedObservable((
new Date()).toJSON()),
EndDate: ko.protectedObservable((
new Date()).toJSON()),
Status: ko.protectedObservable(“Tentative”)
};
}
else
{
return {
DNcmagazine www.dotnetcurry.com | 65