Question

I am using Backbone and Backbone.ModelBinder.

I have a bunch of text fields that are bound via BackboneModelBinder. Everything works as expected however when I make a change to a text field and I don’t unfocus the field first (click off the input field) before hitting the SAVE button, I have to hit the Save button twice — once to unfocus the fields, and then a second time to actually fire the save button handler (which should have fired the first time)

(Save is a standard html button with a backbone event bound to it).

Does anyone have any knowledge of why this might be?

I hope this made sense 😐

Thanks for any help or direction

-Kirk

Answer 1

That’s because ModelBinder by default set the new value to the model’s attributes on “blur” or “change” events (it dependes on the input’s type). You can modify this behavior by changing the source code, adding keyup as binding event in those two methods:

    _bindViewToModel:function () {
        $(this._rootEl).delegate('', 'change keyup', this._onElChanged);
        // The change event doesn't work properly for contenteditable elements - but blur does
        $(this._rootEl).delegate('[contenteditable]', 'blur keyup', this._onElChanged);
    },

    _unbindViewToModel: function(){
        if(this._rootEl){
            $(this._rootEl).undelegate('', 'change keyup', this._onElChanged);
            $(this._rootEl).undelegate('[contenteditable]', 'blur keyup', this._onElChanged);
        }
    },