backbone stickit - reverting model changes

Question

I'm now testing backbone stickit for two-way data binding. Is there a way to revert the changes, for example, while editing a model data through a form, the user press the cancel button, as in the pic below

It seems the model was changed on the fly as we type in the form. What I want is when the user press the cancel button, the model will revert to its original value.

I read about updateModel which need a true value to confirm the model update. However how can my edit-view [cancel-event] trigger a false value to the updateModel function, so that the model will not be updated with the textfield value.

Do I 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 any help.

Answer 1

Try Backbone.Stickit's sister project: Backbone.trackit

Answer 2

This is my solution to this problem. I dun do anything at backbone stickit config. What I do is using the model id and fetch the original data from the restful server if the user click the cancel button. Then use the data from the server to revert the model changes by the stickit 2 way 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 you answer if you have solution that doesn't need getting data from the server to revert the model changes by backbone.stickit

UPDATE - 2nd solution based on Jack 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();

Answer 3

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 change only on submit.