How to duplicate protectedObservable with all editable data?

[Tom Thorp]

I'm try to implement an edit screen off of a grid built using simpleGrid binding from  http://knockoutjs.com/examples/grid.html.

Everything is working correctly except for implementing cancel logic.  I'm trying to implement the equivalent of protectedObservable from http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html, but instead of using protectedObservable for each field, I'm trying to do it for all the data being edited.

My initialization code is -


         var jsModel = ko.mapping.fromJS(data);

          viewModel.myModel.data = jsModel;
          for (var loopIndex = 0; loopIndex < viewModel.myModel.data().length; loopIndex++) {
               buildDependentObservable(viewModel.myModel.data()[loopIndex]);
          }

           viewModel.myModel.editData = ko.protectedObservable(viewModel.myModel.data()[0]);

 

My Json data is


{"WorkInfo":{"BeginDate":"\/Date(1311656400000)\/","CurrentJobExpectedToLast":0,
         "EndDate":"\/Date(1313384400000)\/","EnteredEmployment":false,"JobTitle":null,"WorkSchedule":null,
         "ProviderId":null,"SkillsLearedOnJob":null,"StaffId":null,"WorkEndReason":"RH","WorkType":"SP",
         "ONetOccupationalCatatory":null,"ONetCode":null,"WouldEmployerRehire":null},
"WageBenifits":{"PayType":null,"PayPeriod":null,"AvgHoursPerPeriod":23.5,"HourlyPayRate":1.11,
         "NoBenifits":false,"PaidSick":false,"PaidVacation":false,"PaidHolidays":false,
         "HealthInsurance":false,"PaidTimeOff":false},
"EmployerInfo":{"EmployerName":"McDonalds","EmployerType":null,"AdressLine1":null,"AdressLine2":null,
         "AddressCity":null,"AddressState":null,"AddressZip":null,"ContactPerson":null,
         "ContactPhoneNumber":null,"ContactFaxNumber":null}}

My problem is how to configure the editdata.  If I use the ko.protectedObservable, then I cannot get the edit screen 
to update for new for a new value from the row to be edited.  If I use ko.observable, then when I cancel, it
any edits are transferred to the viewModel that is displaying the row.  

Any suggestions on how to do this, without having to create a protectedObservale for each field on the screen?





[rpn]

Hi Tom-

I think that there are some different ways to approach this one.  

One thought would be like this: http://jsfiddle.net/rniemeyer/np4Ve/

Basically, your "protected" observable would maintain your original object and a temporary copy that is created with ko.toJS that you bind your edits against.  If you choose to cancel, then we just throw it away.  If you choose to commit, then we loop through the properties of the edit object and try to properly apply them to the original depending on whether the original property is observable or not.  Currently, this would only go one level deep.  Probably would be sufficient for many uses.  I had a thought about maybe using the mapping plugin inside of the observable to apply the edited object to the original using updateFromJS.  I think that that would work fine too.

[Tom Thorp]

Like your sample code.  I'll try it when I get back to work on Monday.