I recently built a dynamic form using KnockOut.
This is how that page worked:
A user selectes a person from a list, an AJAX request will post the person id to the server which will then return a JSON object of that person info (phone, name, age...) I didn't know which info will come back for that person. this is why the form is dynamic. anyway I decided to use a data-bind of template (there were a few a kinds of fields not just text boxes) so template with jQuery templates created a very cool dynamic form.
Now a new demand came saying I should add a cancel button to the form. after a quick Google search I came across this post: guarding your model in a very very good blog for KnockOut knockmeout.net,
anyway accepting changed for a specific observable is nice.. but didn't fit my needs for a full form cancel button. so I decided to go with a simple solution. I will keep my original native JSON object that came back from my AJAX request!
so it will go something like this:
// callback function from server
function AjaxCallback (model) {
// page is a namespace
var tempModel = {};
// important making a new object (tempModel) so
// the copyModel won't be a reference
$.extend(tempModel, model);
page.copyModel = tempModel;
UpdateModel (model);
function SwitchModel (modelJSON) {
ko.mapping.fromJS(page.copyOfModel, {}, page.model);
// we will need to apply the bindings again so the view will update.
ko.applyBindings(page.model);
}
function CancelChange () {
UpdatehModel (page.copyModel);
}
function SavePerson () {
var jsonModel = ko.mapping.toJS(page.model);
// ------- save the person through ajax
// don't forget to update the copy model so if
// the cancel button will be
// clicked the last changes won't disappear.. so:
// better if placed in the success callback of the ajax request
page.copyModel = jsonModel;
}
page.model is a model i assume you already have on your page. I only gave to parts of the code needed for a cancel button.
And that's pretty much it...very simple but effective way to create a cancel button
for the whole KnockOut form
No comments:
Post a Comment