Backbone.modelBinder - unable to bind on 'keypress'

Question

I am using Backbone.ModelBinder to my application. I would like to add the event listener on keyup on my name field. I tried this way..

$().ready(function () {

    dogs = new Backbone.Collection({model:Backbone.Model});

    var nameConverter = function(direction, value){
       console.log(direction, value); //on keyup nothing consoles.
        return value;
    }



    var phoneConverter = function (direction, value) {

        if (direction === Backbone.ModelBinder.Constants.ModelToView) {
            var formattedPhone = '';
            if (value) {
                formattedPhone = value.replace(/[^0-9]/g, '');

                if (formattedPhone.length == 7) {
                    formattedPhone = formattedPhone.substring(0, 3) + '-' + formattedPhone.substring(3, 7);
                }
                else if (formattedPhone.length == 10) {
                    formattedPhone = '(' + formattedPhone.substring(0, 3) + ') ' + formattedPhone.substring(3, 6) + '-' + formattedPhone.substring(6, 10);
                }
                else if (formattedPhone.length == 11 && formattedPhone[0] === '1') {
                    formattedPhone = '1 (' + formattedPhone.substring(1, 4) + ') ' + formattedPhone.substring(4, 7) + '-' + formattedPhone.substring(7, 11);
                }
            }

            return formattedPhone;
        }
        else {
            return value.replace(/[^0-9]/g, '');
        }
    };


    model = new Backbone.Model({firstName:'Bob', graduated:'maybe', phone: '1234567'});

    model.bind('change', function () {
        $('#modelData').html(JSON.stringify(model.toJSON()));
    });

    model.trigger('keyup'); // just to show the #modelData values initially, not needed for the ModelBinder


    ViewClass = Backbone.View.extend({

        _modelBinder:undefined,

        initialize:function () {
            this._modelBinder = new Backbone.ModelBinder();

        },

        render:function () {
            var html = '\
Edit your information:<br><br>\
First Name: <input type="text" name="firstName"/><br>\
Last Name: <input type="text" name="lastName"/><br>\
Phone: <input type="text" name="phone"/><br>\
Height: <input type="text" name="height"/><br><br>\
\
Graduated: Yes: <input type="radio" id="graduated_yes" name="graduated" value="yes">\
No: <input type="radio" id="graduated_no" name="graduated" value="no">\
Maybe: <input type="radio" id="graduated_maybe" name="graduated" value="maybe"><br>\
\
Eye Color: Green: <input type="radio" name="eyeColor" value="green">\
Blue: <input type="radio" name="eyeColor" value="blue">\
Brown: <input type="radio" name="eyeColor" value="brown"><br><br>\
\
Drivers licence: <input type="checkbox" name="driversLicense"/><br>\
Motorcycle license: <input type="checkbox" name="motorcycle_license" /><br><br>\
Dog: \
<select name="dog">\
<option value="">Please Select</option>\
<option value="1">Andy</option>\
<option value="2">Biff</option>\
<option value="3">Candy</option>\
</select> <br><br>\
Big Text:<br> <textarea name="bigText" rows="4" cols="80"></textarea>\
';

            this.$el.html(html);

            var bindings = {
                firstName: {selector:'[name=firstName]',converter:nameConverter},
                lastName: '[name=lastName]',
                driversLicense:'[name=driversLicense]',
                motorcycle_license:'[name=motorcycle_license]',
                graduated:'[name=graduated]',
                eyeColor:'[name=eyeColor]',
                phone:{selector:'[name=phone]', converter:phoneConverter},
                dog:{selector:'[name=dog]', converter:(new Backbone.ModelBinder.CollectionConverter(dogs)).convert},
                bigText:'[name=bigText]'
            };

            //this._modelBinder.bind(this.model, this.el, bindings);
            this._modelBinder.bind(this.model, this.el, bindings, {changeTriggers: {'': 'change', '[name=firstName]': 'keyup'}});
            return this;
        }
    });

    view = new ViewClass({model:model});
    $('#viewContent').append(view.render().el);
});

but not working. any one correct me please?

Here is the live Demo

Answer 1

You want to make use of custom triggers. It is not avliable in the version you are using but is avaliable in 1.0.5,

the only thing you would then need to add is a call to bind input on your text field

this._modelBinder.bindCustomTriggers(this.model, this.el,"input input.[name=firstName]" , bindings, {changeTriggers: {'':'change', 'input.[name=firstName]':'input'}});

here it is in a demo working with ModelBinder 1.0.5