Backbone stickit - revert model changes
I am now testing a basic keyboard for two-way data binding. Is there a way to undo the changes, for example, when editing model data through a form, the user clicks the cancel button, as in the picture below
It seems the model has been changed on the fly as we enter the form. I want the user to click the cancel button, the model will revert to its original value.
I read about updateModel which requires a true value to confirm the model is updated. However, as my edit-view [cancel-event] raises a spurious value for the updateModel function , so the model will not be updated with the textbox value.
Do you need something like a global variable?
//global variable
var updateModelTitle = true;
//backbone stickit bindings
bindings: {
'#title': {
observe: 'title',
updateModel: 'confirmUpdate'
}
},
confirmUpdate: function(val, event, options) {
return updateModelTitle;
}
//cancel button event click event
updateModelTitle = false;
Thanks in advance for your help.
source to share
This is my solution to this problem. I am not doing anything in the basic configuration. I am using the model id and fetch the original data from the rest of the server if the user clicks the cancel button. Then use the data from the server to revert the model changes using the 2nd key binding.
canceledit: function() {
var modelIndex = this.model.get('index');
var modelId = this.model.get('id');
this.$el.fadeOut(500, function() {
var fetchTask = new App.Models.Task({ id: modelId });
fetchTask.fetch({
wait: true,
success: function(model, response, options) {
var title = model.get("title");
var task = App.Collections.tasksCollection.at(modelIndex);
task.set({title : title});
},
error: function(model, response, options) {
console.log('An error occured while fetching the data...');
}
});
this.remove();
});
}
please post an answer if you have a solution that doesn't need to fetch data from the server to revert model changes using backbone.stickit
UPDATE - Second solution based on Jack's suggestion - no REST call
//create global variable for model collection index and title properties
App.Global.modelTaskCurrentTitle = "";
App.Global.modelTaskIndex = -1;
//in edit view render function
//capture info needed
App.Global.modelTaskIndex = this.model.get('index');
App.Global.modelTaskCurrentTitle = this.model.get('title');
//in cancel function for edit-view
//or any view that need to remove edit-view to prevent zombie-edit-view
//and also reverting model changes by stickit in edit-view
//revert stickit changes
var task = App.Collections.tasksCollection.at(App.Global.modelTaskIndex);
task.set({title : App.Global.modelTaskCurrentTitle});
//remove edit view
App.Views.editTaskView.remove();
source to share
I would use
bindings: {
'#title': {
observe: 'title',
event: ['change']
updateModel: function(val, event, options) {
if (val)
return val;
}
}
}
<form>
<input id="title" type="text">
<button type="Cancel" data-action="destroy-view">
<button type="submit">OK</button>
</form>
So the model attribute will only change to submit.
source to share